CSS:-moz-outline-style

From MDC

« CSS Reference « CSS Reference:Mozilla Extensions

[edit] 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
• Percentages: n/a
• Media: visual
• Computed value:

Starting with Mozilla 1.8 / Firefox 1.5, the standard CSS 2.1 outline-style property is supported as well. Use of outline-style is preferred to -moz-outline-style.

[edit] Syntax

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

[edit] 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.

[edit] Related properties

• -moz-outline sets the color, style, and width of the outline.
• -moz-outline-color sets the color of the outline.
• -moz-outline-offset offsets the outline from the element.
• -moz-outline-radius sets the rounding of the outline corners.
• -moz-outline-radius-bottomleft sets the rounding of the bottom-left corner.
• -moz-outline-radius-bottomright sets the rounding of the bottom-right corner.
• -moz-outline-radius-topleft sets the rounding of the top-left corner.
• -moz-outline-radius-topright sets the rounding of the top-right corner.
• -moz-outline-width sets the width of the outline.

[edit] Examples

hbox.example {
  /* make the outline a 3D groove style */
  -moz-outline-style: groove;
}