-moz-outline

  • Revision slug: CSS/-moz-outline
  • Revision title: -moz-outline
  • Revision id: 136123
  • Created:
  • Creator: BijuGC
  • Is current revision? No
  • Comment /* Summary */

Revision Content

{{ CSSMozExtensionRef() }}

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>
<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">Gecko</a> 1.8 (<a href="en/Firefox_1.5">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: [<i>-moz-outline-color</i> || <i>-moz-outline-style</i> || <i>-moz-outline-width</i> | 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>
{{ languages( { "fr": "fr/CSS/-moz-outline", "pl": "pl/CSS/-moz-outline" } ) }}
Revert to this revision