outline-style

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

Revision Content

{{CSSRef}}

Summary

The outline-style CSS property is used to set the style of the outline of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out.

It is often more convenient to use the shortcut property {{cssxref("outline")}} instead of outline-style, outline-width and outline-color.

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

Syntax

Formal syntax: {{csssyntax("outline-style")}}
outline-style: none
outline-style: dotted
outline-style: dashed
outline-style: solid
outline-style: double
outline-style: groove
outline-style: ridge
outline-style: inset
outline-style: outset

outline-style: inherit

Values

<br-style> can be any of the following:

none
No outline ({{Cssxref("outline-width")}} is 0).
dotted
The outline is a series of dots.
dashed
The outline is a series of short line segments.
solid
The outline is a single line.
double
The outline is two single lines. The {{Cssxref("outline-width")}} is the sum of the two lines and the space between them.
groove
The outline looks as though it were carved into the canvas.
ridge
The opposite of groove: the outline looks as though it were coming out of the canvas.
inset
The outline makes the box look as though it were embeded in the canvas.
outset
The opposite of inset: the outline makes the box look as though it were coming out of the canvas.

Examples

.example {  /* make the outline a 3D groove style */
   outline-style: groove;        /* same result as "outline: groove" */ 
}

Specifications

Specification Status Comment
{{SpecName('CSS3 UI', '#outline-style', 'outline-style')}} {{Spec2('CSS3 UI')}} No change.
{{SpecName('CSS2.1', 'ui.html#propdef-outline-style', 'outline-style')}} {{Spec2('CSS2.1')}}  

Browser compatibility

{{CompatibilityTable}}
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support  1.0 1.5 (1.8) [*] 8.0 7.0 1.2 (125)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}

[*] In browsers prior to Gecko 1.8 (Firefox 1.5) this effect can be achieved using Mozilla CSS Extension {{Cssxref("-moz-outline-style")}}.

See also

  • {{CSS_Reference:Outline}}

Revision Source

<div>
  {{CSSRef}}</div>
<h2 id="Summary">Summary</h2>
<p>The <code>outline-style</code> CSS property is used to set the style of the outline of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out.</p>
<p>It is often more convenient to use the shortcut property {{cssxref("outline")}} instead of<code> outline-style</code>,<code> outline-width </code>and<code> outline-color</code>.</p>
<p>{{cssbox("outline-style")}}</p>
<h2 id="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-style")}}
</pre>
<pre>
outline-style: none
outline-style: dotted
outline-style: dashed
outline-style: solid
outline-style: double
outline-style: groove
outline-style: ridge
outline-style: inset
outline-style: outset

outline-style: inherit
</pre>
<h2 id="Values">Values</h2>
<p><code>&lt;br-style&gt; </code>can be any of the following:</p>
<dl>
  <dt>
    none</dt>
  <dd>
    No outline ({{Cssxref("outline-width")}} is<code> 0</code>).</dd>
  <dt>
    dotted</dt>
  <dd style="outline:10px dotted red">
    The outline is a series of dots.</dd>
  <dt>
    dashed</dt>
  <dd style="outline:10px dashed red">
    The outline is a series of short line segments.</dd>
  <dt>
    solid</dt>
  <dd style="outline:10px solid red">
    The outline is a single line.</dd>
  <dt>
    double</dt>
  <dd style="outline:10px double red">
    The outline is two single lines. The {{Cssxref("outline-width")}} is the sum of the two lines and the space between them.</dd>
  <dt>
    groove</dt>
  <dd style="outline:10px groove red;">
    The outline looks as though it were carved into the canvas.</dd>
  <dt>
    ridge</dt>
  <dd style="outline:10px ridge red">
    The opposite of<code> groove</code>: the outline looks as though it were coming out of the canvas.</dd>
  <dt>
    inset</dt>
  <dd style="outline:10px inset red">
    The outline makes the box look as though it were embeded in the canvas.</dd>
  <dt>
    outset</dt>
  <dd style="outline:10px outset red">
    The opposite of<code> inset</code>: the outline makes the box look as though it were coming out of the canvas.</dd>
</dl>
<h2 id="Examples">Examples</h2>
<pre class="brush: css">
.example {  /* make the outline a 3D groove style */
   outline-style: groove;        /* same result as "outline: groove" */ 
}
</pre>
<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-style', 'outline-style')}}</td>
      <td>{{Spec2('CSS3 UI')}}</td>
      <td>No change.</td>
    </tr>
    <tr>
      <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline-style', 'outline-style')}}</td>
      <td>{{Spec2('CSS2.1')}}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<div>
  {{CompatibilityTable}}</div>
<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>&nbsp;1.0</td>
        <td>1.5 (1.8) [*]</td>
        <td>8.0</td>
        <td>7.0</td>
        <td>1.2 (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>
<p>[*] In browsers prior to <a href="/en-US/docs/Gecko" title="Gecko">Gecko</a> 1.8 (<a href="/en-US/docs/Firefox_1.5_for_developers" title="Firefox_1.5_for_developers">Firefox 1.5</a>) this effect can be achieved using <a href="/en-US/docs/CSS/CSS_Reference/Mozilla_Extensions" title="CSS_Reference/Mozilla_Extensions">Mozilla CSS Extension</a> {{Cssxref("-moz-outline-style")}}.</p>
<h2 id="See_also">See also</h2>
<ul>
  <li>{{CSS_Reference:Outline}}</li>
</ul>
Revert to this revision