mozilla

Revision 25621 of outline-offset

  • Revision slug: CSS/outline-offset
  • Revision title: outline-offset
  • Revision id: 25621
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment 60 words added, 12 words removed

Revision Content

« CSS « CSS Reference

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.

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

In browsers previous to Gecko 1.8 (Firefox 1.5) this effect can be achieved using by using Mozilla CSS Extension {{ Cssxref("-moz-outline-offset") }}.

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

{{ CSSRefExampleLink("outline-offset") }} {{ Fixeg() }}

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

Specifications

Browser compatibility

Browser Lowest Version
Internet Explorer n/a
Firefox (Gecko) 1.5 (1.8)
Opera 9.5
Safari (WebKit) 1.2 (125)

See also

{{ CSS_Reference:Outline() }}

Revision Source

<p><span class="lang lang-en">« <a href="../../../../en/CSS" rel="internal">CSS</a> « <a href="../../../../en/CSS_Reference" rel="internal">CSS Reference</a></span></p>
<h3 name="Summary">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><span class="lang lang-en"><a href="../../../../en/CSS/initial_value" rel="internal">Initial value</a> </span>: <code>0</code></li> <li>Applies to: all elements</li> <li><span class="lang lang-en"><a href="../../../../en/CSS/inheritance" rel="internal">Inherited</a> </span>: no</li> <li>Percentages: N/A</li> <li>Media: <span class="lang lang-en"><span class="lang lang-en"><code><a href="../../../../en/CSS/Media/Visual" rel="internal">visual</a></code></span></span><span class="lang lang-en"> </span></li> <li>Computed value: <code>&lt;length&gt;</code> value in absolute units</li>
</ul>
<p>The space will be transparent (the parent will determine the background).</p>
<p>In browsers previous to <a href="/en/Gecko" title="en/Gecko">Gecko</a> 1.8 (<a href="/en/Firefox_1.5_for_developers" title="en/Firefox_1.5_for_developers">Firefox 1.5</a>) this effect can be achieved using by using <a href="/en/CSS_Reference/Mozilla_Extensions" title="en/CSS_Reference/Mozilla_Extensions">Mozilla CSS Extension</a> {{ Cssxref("-moz-outline-offset") }}.</p>
<h3 name="Syntax">Syntax</h3>
<pre class="eval">outline-offset:  &lt;length&gt; | inherit
</pre>
<h3 name="Values">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 name="Examples">Examples</h3>
<p>{{ CSSRefExampleLink("outline-offset") }} {{ Fixeg() }}</p>
<pre class="eval">.example {
  outline: dashed thin;
  /* Move the outline 3px away from the border */
  outline-offset: 3px;
}
</pre>
<h3 name="Specifications">Specifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/css3-ui/#outline-offset" title="http://www.w3.org/TR/css3-ui/#outline-offset">CSS 3 Basic User Interface #outline-offset</a></li>
</ul>
<h3 name="Browser_compatibility">Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest Version</th> </tr> <tr> <td>Internet Explorer</td> <td>n/a</td> </tr> <tr> <td>Firefox (Gecko)</td> <td><strong>1.5</strong> (1.8)</td> </tr> <tr> <td>Opera</td> <td><strong>9.5</strong></td> </tr> <tr> <td>Safari (WebKit)</td> <td><strong>1.2</strong> (125)</td> </tr> </tbody>
</table>
<h3 name="See_also">See also</h3>
<p>{{ CSS_Reference:Outline() }}</p>
Revert to this revision