outline-offset

  • Revision slug: CSS/outline-offset
  • Revision title: outline-offset
  • Revision id: 361405
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

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.

{{cssbox("outline-offset")}}

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

Syntax

Formal syntax: {{csssyntax("outline-offset")}}
outline-offset: 3px
outline-offset: 0.2em

outline-offset: 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;

Specifications

Specification Status Comment
{{ SpecName('CSS3 UI', '#outline-offset', 'outline-offset') }} {{ Spec2('CSS3 UI') }} Initial definition
{{ SpecName('CSS3 Transitions', '#animatable-css', 'outline-offset') }} {{ Spec2('CSS3 Transitions') }} Defines outline-offset as animatable.

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() }}

Revision Source

<p>{{ CSSRef() }}</p>
<h2 id="Summary">Summary</h2>
<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>
<p>{{cssbox("outline-offset")}}</p>
<p>The space will be transparent (the parent will determine the background).</p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="twopartsyntaxbox">
<a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("outline-offset")}}
</pre>
<pre>
outline-offset: 3px
outline-offset: 0.2em

outline-offset: inherit
</pre>
<h3 id="Values">Values</h3>
<dl>
  <dt>
    <code>&lt;length&gt;</code></dt>
  <dd>
    The width of the space. See {{ Xref_csslength() }} for possible units. Negative values place the outline inside the element.</dd>
</dl>
<h2 id="Examples">Examples</h2>
<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>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS3 UI', '#outline-offset', 'outline-offset') }}</td>
      <td>{{ Spec2('CSS3 UI') }}</td>
      <td>Initial definition</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'outline-offset') }}</td>
      <td>{{ Spec2('CSS3 Transitions') }}</td>
      <td>Defines <code>outline-offset</code> as animatable.</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
<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>&nbsp;(1.8)</td>
        <td>{{ CompatNo() }}</td>
        <td><strong>9.5</strong></td>
        <td><strong>1.2</strong>&nbsp;(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&nbsp;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>
<h2 id="See_also">See also</h2>
<ul>
  <li>{{ CSS_Reference:Outline() }}</li>
</ul>
Revert to this revision