-moz-outline-style

  • Revision slug: CSS/-moz-outline-style
  • Revision title: -moz-outline-style
  • Revision id: 136095
  • Created:
  • Creator: Mgjbot
  • Is current revision? No
  • Comment robot Adding: [[pl:CSS:-moz-outline-style]]

Revision Content

{{template.CSSMozExtensionRef()}}

Summary

In Mozilla applications, -moz-outline-style 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:

  • Initial value: none
  • Applies to: all elements
  • Inherited: no

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

Syntax

-moz-outline-style: <style> | inherit

Values

<style> can be any of the following:

none
No outline (-moz-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 -moz-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.

Related properties

Examples

hbox.example {
  /* make the outline a 3D groove style */
  -moz-outline-style: groove;
}
{{ wiki.languages( { "pl": "pl/CSS/-moz-outline-style" } ) }}

Revision Source

<p> 
{{template.CSSMozExtensionRef()}}
</p>
<h3 name="Summary"> Summary </h3>
<p>In Mozilla applications, <code>-moz-outline-style</code> 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>
<ul><li> Initial value: none
</li><li> Applies to: all elements
</li><li> Inherited: no
</li></ul>
<p>Starting with Mozilla 1.8 / Firefox 1.5, the standard CSS 2.1 {{template.Cssxref("outline-style")}} property is supported as well. Use of {{template.Cssxref("outline-style")}} is preferred to <code>-moz-outline-style</code>.
</p>
<h3 name="Syntax"> Syntax </h3>
<pre class="eval">-moz-outline-style: &lt;style&gt; | inherit
</pre>
<h3 name="Values"> Values </h3>
<p><code>&lt;style&gt;</code> can be any of the following:
</p>
<dl><dt> none</dt><dd> No outline (<a href="en/CSS/-moz-outline-width">-moz-outline-width</a> is 0).
</dd><dt> dotted</dt><dd> The outline is a series of dots.
</dd><dt> dashed</dt><dd> The outline is a series of short line segments.
</dd><dt> solid</dt><dd> The outline is a single line.
</dd><dt> double</dt><dd> The outline is two single lines. The <a href="en/CSS/-moz-outline-width">-moz-outline-width</a> is the sum of the two lines and the space between them.
</dd><dt> groove</dt><dd> The outline looks as though it were carved into the canvas.
</dd><dt> ridge</dt><dd> The opposite of <code>groove</code>: the outline looks as though it were coming out of the canvas.
</dd><dt> inset</dt><dd> The outline makes the box look as though it were embeded in the canvas.
</dd><dt> outset</dt><dd> The opposite of <code>inset</code>: the outline makes the box look as though it were coming out of the canvas.
</dd></dl>
<h3 name="Related_properties"> Related properties </h3>
<ul><li> <a href="en/CSS/-moz-outline">-moz-outline</a> sets the color, style, and width of the outline.
</li><li> <a href="en/CSS/-moz-outline-color">-moz-outline-color</a> sets the color of the outline.
</li><li> <a href="en/CSS/-moz-outline-offset">-moz-outline-offset</a> offsets the outline from the element.
</li><li> <a href="en/CSS/-moz-outline-radius">-moz-outline-radius</a> sets the rounding of the outline corners.
</li><li> <a href="en/CSS/-moz-outline-radius-bottomleft">-moz-outline-radius-bottomleft</a> sets the rounding of the bottom-left corner.
</li><li> <a href="en/CSS/-moz-outline-radius-bottomright">-moz-outline-radius-bottomright</a> sets the rounding of the bottom-right corner.
</li><li> <a href="en/CSS/-moz-outline-radius-topleft">-moz-outline-radius-topleft</a> sets the rounding of the top-left corner.
</li><li> <a href="en/CSS/-moz-outline-radius-topright">-moz-outline-radius-topright</a> sets the rounding of the top-right corner.
</li><li> <a href="en/CSS/-moz-outline-width">-moz-outline-width</a> sets the width of the outline.
</li></ul>
<h3 name="Examples"> Examples </h3>
<pre>hbox.example {
  /* make the outline a 3D groove style */
  -moz-outline-style: groove;
}
</pre>
{{ wiki.languages( { "pl": "pl/CSS/-moz-outline-style" } ) }}
Revert to this revision