-moz-outline

  • Revision slug: CSS/-moz-outline
  • Revision title: -moz-outline
  • Revision id: 136124
  • Created:
  • Creator: j.j.
  • Is current revision? No
  • Comment 1 words added

Revision Content

{{ CSSMozExtensionRef() }}

Deprecated

Summary

In Gecko-based applications, -moz-outline is used to set 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:

  • {{ Xref_cssinitial() }}: see individual properties
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: no
  • Percentages: n/a
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}:

Starting with Gecko 1.8 (Firefox 1.5), the standard CSS 2.1 {{ Cssxref("outline") }} property is supported as well. Use of {{ Cssxref("outline") }} is preferred to -moz-outline.

Syntax

-moz-outline: [-moz-outline-color || -moz-outline-style || -moz-outline-width | inherit] ;

Values

-moz-outline-color
Sets the outline color. See {{ Cssxref("-moz-outline-color") }}.
-moz-outline-style
Sets the style of the outline. See {{ Cssxref("-moz-outline-style") }}.
-moz-outline-width
Sets the width of the outline. See {{ Cssxref("-moz-outline-width") }}.

Related properties

  • {{ Cssxref("-moz-outline-color") }} sets the color of the outline.
  • {{ Cssxref("-moz-outline-offset") }} offsets the outline from the element.
  • {{ Cssxref("-moz-outline-radius") }} sets the rounding of the outline corners.
  • {{ Cssxref("-moz-outline-radius-bottomleft") }} sets the rounding of the bottom-left corner.
  • {{ Cssxref("-moz-outline-radius-bottomright") }} sets the rounding of the bottom-right corner.
  • {{ Cssxref("-moz-outline-radius-topleft") }} sets the rounding of the top-left corner.
  • {{ Cssxref("-moz-outline-radius-topright") }} sets the rounding of the top-right corner.
  • {{ Cssxref("-moz-outline-style") }} sets the style of the outline.
  • {{ Cssxref("-moz-outline-width") }} sets the width of the outline.

Examples

hbox.example {
  /* a solid red outline that is 10px width */
  -moz-outline: red solid 10px;
}

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

Revision Source

<p>{{ CSSMozExtensionRef() }}</p>
<div style="border: 1px solid rgb(81, 81, 255); margin: 10px 0px; padding: 0px 10px; background-color: rgb(185, 185, 255); font-weight: bold; text-align: center;">
<p style="margin: 4px 0px;">Deprecated</p>
</div>
<h3 name="Summary">Summary</h3>
<p>In Gecko-based applications, <code>-moz-outline</code> is used to set 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>
<ul> <li>{{ Xref_cssinitial() }}: see individual properties</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() }}:</li>
</ul>
<p>Starting with <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>), the standard CSS 2.1 {{ Cssxref("outline") }} property is supported as well. Use of {{ Cssxref("outline") }} is preferred to <code>-moz-outline</code>.</p>
<h3 name="Syntax">Syntax</h3>
<pre class="eval">-moz-outline: [<em>-moz-outline-color</em> || <em>-moz-outline-style</em> || <em>-moz-outline-width</em> | inherit] ;
</pre>
<h3 name="Values">Values</h3>
<dl><dt> -moz-outline-color</dt><dd> Sets the outline color. See {{ Cssxref("-moz-outline-color") }}. </dd><dt> -moz-outline-style</dt><dd> Sets the style of the outline. See {{ Cssxref("-moz-outline-style") }}. </dd><dt> -moz-outline-width</dt><dd> Sets the width of the outline. See {{ Cssxref("-moz-outline-width") }}. </dd></dl>
<h3 name="Related_properties">Related properties</h3>
<ul> <li>{{ Cssxref("-moz-outline-color") }} sets the color of the outline.</li> <li>{{ Cssxref("-moz-outline-offset") }} offsets the outline from the element.</li> <li>{{ Cssxref("-moz-outline-radius") }} sets the rounding of the outline corners.</li> <li>{{ Cssxref("-moz-outline-radius-bottomleft") }} sets the rounding of the bottom-left corner.</li> <li>{{ Cssxref("-moz-outline-radius-bottomright") }} sets the rounding of the bottom-right corner.</li> <li>{{ Cssxref("-moz-outline-radius-topleft") }} sets the rounding of the top-left corner.</li> <li>{{ Cssxref("-moz-outline-radius-topright") }} sets the rounding of the top-right corner.</li> <li>{{ Cssxref("-moz-outline-style") }} sets the style of the outline.</li> <li>{{ Cssxref("-moz-outline-width") }} sets the width of the outline.</li>
</ul>
<h3 name="Examples">Examples</h3>
<pre>hbox.example {
  /* a solid red outline that is 10px width */
  -moz-outline: red solid 10px;
}
</pre>
<p>{{ languages( { "fr": "fr/CSS/-moz-outline", "pl": "pl/CSS/-moz-outline" } ) }}</p>
Revert to this revision