This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

outline-offset

Summary

The outline-offset property offsets the outline and draw it beyond the border edge.

Overview table

Initial value
0
Applies to
All elements
Inherited
No
Media
visual
Computed value
<length> value in absolute units (px or physical).
Animatable
Yes
CSS Object Model Property
outlineOffset
Percentages
N/A

Syntax

  • outline-offset: <length>

  • outline-offset: inherit


Values

<length>
Floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px). For more information about the supported length units, see CSS Values and Units Reference (Length).


inherit
This is a keyword indicating that the value is inherited from their parent's element calculated value.


Examples

A simple example showing multiple <span>s with border and outline. 

<div class="all">
    <p>
      <span class="one">One</span>
    </p>
    <p>
      <span class="two">Two</span>
    </p>
    <p>
      <span class="three">Three</span>
    </p>
</div>

View live example 


.all {
  background-color: lightgrey;
}

.all p {

padding: 20px;

}


.all span {

padding: 10px;

margin: 10px 10px 10px 10px;

font-size: 36px;

font-family: Bitter;

border: red solid 3px;

outline: blue solid 3px;

}


.all .one {

outline-offset: 0px;

}


.all .two {

outline-offset: 5px;

}


.all .three {

outline-offset: 0.2em;

}

View live example

Usage

 If the computed value of ‘outline-offset’ is anything other than 0, then the outline is outset from the border edge by that amount.


Related specifications

CSS Basic User Interface Module Level 3 (CSS3 UI)
Working Draft

Attributions