Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla

Revision 25633 of outline-offset

  • Revision slug: CSS/outline-offset
  • Revision title: outline-offset
  • Revision id: 25633
  • Created:
  • Creator: FredB
  • Is current revision? No
  • Comment adding fr version of outline-offset; 35 words added

Revision Content

{{ CSSRef() }}

Summary

The outline-offset CSS property is used to set space between an {{ cssxref("outline") }} and the edge or border of an element. An outline is a line that is drawn around elements, outside the border edge.

  • {{ Xref_cssinitial() }}: 0
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: no
  • Percentages: n/a
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: <length> value in absolute units

The space will be transparent (the parent will determine the background).

Syntax

outline-offset:  <length> | inherit

Values

<length>
The width of the space. See {{ Xref_csslength() }} for possible units. Negative values place the outline inside the element.

Examples

.example {
  outline: dashed thin;
  /* Move the outline 3px away from the border */
  outline-offset: 3px;
}

The code above produces this effect:

outline: offset 5px;

Another example:

outline: multiple offsets;


Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 1.5 (1.8) {{ CompatNo() }} 9.5 1.2 (125)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

See also

{{ CSS_Reference:Outline() }}

{{ languages( { "fr": "fr/CSS/outline-offset", "pl": "pl/CSS/-moz-outline-offset" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h3>Summary</h3>
<p>The<code> outline-offset </code>CSS property is used to set space between an {{ cssxref("outline") }} and the edge or border of an element. An outline is a line that is drawn around elements, outside the border edge.</p>
<ul> <li>{{ Xref_cssinitial() }}:<code> 0</code></li> <li>Applies to: all elements</li> <li>{{ Xref_cssinherited() }}: no</li> <li>Percentages: n/a</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: <code>&lt;length&gt;</code> value in absolute units</li>
</ul>
<p>The space will be transparent (the parent will determine the background).</p>
<h3 name="Syntax">Syntax</h3>
<pre>outline-offset:  &lt;length&gt; | inherit
</pre>
<h3>Values</h3>
<dl> <dt>&lt;length&gt;</dt> <dd>The width of the space. See {{ Xref_csslength() }} for possible units. Negative values place the outline inside the element.</dd>
</dl>
<h3>Examples</h3>
<pre class="brush: css">.example {
  outline: dashed thin;
  /* Move the outline 3px away from the border */
  outline-offset: 3px;
}
</pre>
<p>The code above produces this effect:</p>
<p><span style="outline:dashed thin; outline-offset: 5px;">outline: offset 5px;</span></p>
<p>Another example:</p>
<p><span style="outline:green solid 3px; outline-offset: 1px;"><span style="outline:blue solid 3px; outline-offset: 1px;">outline: multiple offsets;</span></span></p>
<h3 name="Browser_Compatibility"><br> Browser compatibility</h3>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari (WebKit)</th> </tr> <tr> <td>Basic support</td> <td>1.0</td> <td><strong>1.5</strong> (1.8)</td> <td>{{ CompatNo() }}</td> <td><strong>9.5</strong></td> <td><strong>1.2</strong> (125)</td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Phone</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
<h3>See also</h3>
<p>{{ CSS_Reference:Outline() }}</p>
<p>{{ languages( { "fr": "fr/CSS/outline-offset", "pl": "pl/CSS/-moz-outline-offset" } ) }}</p>
Revert to this revision