Compare Revisions

outline-style

Change Revisions

Revision 357013:

Revision 357013 by teoli on

Revision 360241:

Revision 360241 by ethertank on

Title:
outline-style
outline-style
Slug:
CSS/outline-style
CSS/outline-style
Tags:
"css", "CSS Reference"
"css", "CSS Reference"
Content:

Revision 357013
Revision 360241
n7    <p>n7    <div>
8      {{ CSSRef() }}8      {{CSSRef}}
9    </p>9    </div>
n17      It is often more convenient to use the shortcut property {{n17      It is often more convenient to use the shortcut property {{
> cssxref("outline") }} instead of <code>outline-style</code>, <co>cssxref("outline")}} instead of <code>outline-style</code>, <code
>de>outline-width</code> and <code>outline-color</code>.>>outline-width</code> and <code>outline-color</code>.
n21        <dfn>{{ Xref_cssinitial() }}</dfn> {{ Cssinitial("outlinen21        <dfn>{{Xref_cssinitial}}</dfn> {{Cssinitial("outline-styl
>-style") }}>e")}}
n27        <dfn>{{ Xref_cssinherited() }}</dfn> non27        <dfn>{{Xref_cssinherited}}</dfn> no
28      </li>
29      <li>28      </li>
29      <li>
30        <dfn>Media</dfn> {{ Xref_cssvisual() }}30        <dfn>Media</dfn> {{Xref_cssvisual}}
31      </li>
32      <li>31      </li>
32      <li>
33        <dfn>{{ Xref_csscomputed() }}</dfn> specified value33        <dfn>{{Xref_csscomputed}}</dfn> specified value
n66        No outline ({{ Cssxref("outline-width") }} is <code>0</con66        No outline ({{Cssxref("outline-width")}} is <code>0</code
>de>).>>).
n71      <dd style="outline:dotted">n71      <dd style="outline:10px dotted red">
n77      <dd style="outline:dashed">n77      <dd style="outline:10px dashed red">
n83      <dd style="outline:solid">n83      <dd style="outline:10px solid red">
n89      <dd style="outline:double">n89      <dd style="outline:10px double red">
90        The outline is two single lines. The {{ Cssxref("outline-90        The outline is two single lines. The {{Cssxref("outline-w
>width") }} is the sum of the two lines and the space between them>idth")}} is the sum of the two lines and the space between them.
>. 
n95      <dd style="outline:groove">n95      <dd style="outline:10px groove red;">
n101      <dd style="outline:ridge">n101      <dd style="outline:10px ridge red">
n107      <dd style="outline:inset">n107      <dd style="outline:10px inset red">
n113      <dd style="outline:outset">n113      <dd style="outline:10px outset red">
n122 n
123            outline-style: groove;        /* same result as "outl122   outline-style: groove;        /* same result as "outline: groo
>ine: groove" */ >ve" */ 
n146            {{ SpecName('CSS3 UI', '#outline-style', 'outline-styn145            {{SpecName('CSS3 UI', '#outline-style', 'outline-styl
>le') }}>e')}}
147          </td>
148          <td>146          </td>
147          <td>
149            {{ Spec2('CSS3 UI') }}148            {{Spec2('CSS3 UI')}}
n157            {{ SpecName('CSS2.1', 'ui.html#propdef-outline-style'n156            {{SpecName('CSS2.1', 'ui.html#propdef-outline-style',
>, 'outline-style') }}> 'outline-style')}}
158          </td>
159          <td>157          </td>
158          <td>
160            {{ Spec2('CSS2.1') }}159            {{Spec2('CSS2.1')}}
n168    <h2 id="Browser_Compatibility" name="Browser_Compatibility">n167    <h2 id="Browser_compatibility" name="Browser_compatibility">
n171    <p>n170    <div>
172      {{ CompatibilityTable() }}171      {{CompatibilityTable}}
173    </p>172    </div>
n234              IE&nbsp;Phonen233              IE Phone
n248              {{ CompatUnknown() }}n247              {{CompatUnknown}}
249            </td>
250            <td>248            </td>
251              {{ CompatUnknown() }}
252            </td>249            <td>
250              {{CompatUnknown}}
253            <td>251            </td>
254              {{ CompatUnknown() }}
255            </td>252            <td>
253              {{CompatUnknown}}
256            <td>254            </td>
257              {{ CompatUnknown() }}
258            </td>255            <td>
256              {{CompatUnknown}}
259            <td>257            </td>
258            <td>
260              {{ CompatUnknown() }}259              {{CompatUnknown}}
n267      [*] In browsers prior to <a href="/en/Gecko" title="en/Geckn266      [*] In browsers prior to <a href="/en-US/docs/Gecko" title=
>o">Gecko</a> 1.8 (<a href="/en/Firefox_1.5_for_developers" title=>"Gecko">Gecko</a> 1.8 (<a href="/en-US/docs/Firefox_1.5_for_devel
>"en/Firefox_1.5_for_developers">Firefox 1.5</a>) this effect can >opers" title="Firefox_1.5_for_developers">Firefox 1.5</a>) this e
>be achieved using <a href="/en/CSS/CSS_Reference/Mozilla_Extensio>ffect can be achieved using <a href="/en-US/docs/CSS/CSS_Referenc
>ns" title="en/CSS_Reference/Mozilla_Extensions">Mozilla CSS Exten>e/Mozilla_Extensions" title="CSS_Reference/Mozilla_Extensions">Mo
>sion</a> {{ Cssxref("-moz-outline-style") }}.>zilla CSS Extension</a> {{Cssxref("-moz-outline-style")}}.
t273      <li>{{ CSS_Reference:Outline() }}t272      <li>{{CSS_Reference:Outline}}

Back to History