Revision Content

Mozilla supports a number of extensions to CSS that are prefaced by '-moz'. These include a number of capabilities, including rounded borders, and the ability to specify different box width and height calculations to more easily support browers that perform such calculations in a non-standard way.

Some of these properties have subsequently been proposed for inclusion in the CSS standard, though the standard property may differ slightly from the -moz implementation.

-moz-activehyperlinktext

-moz-alias

This is a cursor value that Mozilla used (and still support) before CSS 3 cursor: alias was implemented. Now, since December 2004, (Gecko {{template.Abbr("rv", "Revision Version")}}:1.8a6) Mozilla Firefox, Mozilla 1.7+ and Seamonkey 1.x support and render the CSS 3 cursor alias.
The -moz-alias cursor value is used to indicate an alias or shortcut to something that is to be created. The -moz-alias cursor (just like the alias cursor) is rendered as an arrow with a small curved arrow next to it.

On the Windows platform, the -moz-alias cursor value can (could?) look like this:

Since CSS3 cursor: alias is supported and rendered in Mozilla products, there is no need anymore to use cursor: -moz-alias.

-moz-all

-moz-anchor-decoration

-moz-appearance

Used to cause an element to take its border, background style and size from the operating system's theme. This causes XUL elements to be drawn similar to the way the user's system draws such elements.

The list of possible values below may be incomplete.

none: No special styling is applied. (Default)

button

button-small

checkbox

checkbox-container

checkbox-small

dialog

listbox

menu

menulist

menulist-button

menulist-textfield

progressbar

radio

radio-container

radio-small

scrollbar

scrollbarbutton-down

scrollbarbutton-left

scrollbarbutton-right

scrollbarbutton-up

scrollbartrack-horizontal

scrollbartrack-vertical

separator

statusbar

tab

tab-left-edge

tabpanels

textfield

toolbar

toolbarbutton

toolbarbutton

toolbox

tooltip

treeheadercell

treeheadersortarrow

treeitem

treetwisty

treetwistyopen

treeview

-moz-arabic-indic

-moz-background-clip

Indicates whether the background, either the color or image, should extend into the border area of the element. This property is similar to the CSS3 background-clip property.

border: The background extends into the border of the element. It will be drawn behind the border.

padding: The background does not extend into the border.

-moz-background-inline-policy

Specifies how the background image of an inline element is determined when the content of the inline element wraps onto multiple lines.

bounding-box:

continuous: The background image wraps around on to each line as if the text had no line breaks. For example, if the image is 500 pixels and the inline box is 300 pixels, the first 300 pixels of the image appears on the first line, and the last 200 pixels followed by the first 100 pixels of the image appear on the second line. The image repeats until the end of the content.

each-box:

-moz-background-origin

Determines how the background-position property is determined. This property is similar to the CSS3 background-origin property.

content: The position is relative to the content.

border: The position is relative to the border.

padding: The position is relative to the padding.

-moz-bengali

-moz-bg-inset

-moz-bg-outset

-moz-bg-solid

-moz-binding

Used to specify an XBL binding to use for the element. The property should be a URL of an XBL file containing the binding. The URL should contain an anchor to point to a specific binding with the XBL file, referenced by its id attribute.

-moz-border-bottom-colors

Sets the border colors for the bottom edge. It should be set to a list of colors. When an element has a border that is larger than a single pixel, each line of pixels uses the next color specified in this property. This eliminates the need for nested boxes. If the border is wider than the number of colors specified for this property, the remaining part of the border is the color specified by the border property.

-moz-border-left-colors

Sets the border colors for the left edge. See the -moz-border-colors-bottom property for more information.

-moz-border-radius

This property can be used to give borders rounded corners. It is similar to the border-radius property in the CSS3 Backgrounds and Borders Module. This should be set to a numeric value indicating the amount of rounding to use. You must use a unit (such as px or em). A higher number makes the border rounder.

-moz-border-radius-topleft

-moz-border-radius-topright

-moz-border-right-colors

Sets the border colors for the right edge. See the -moz-border-colors-bottom property for more information.

-moz-border-top-colors

Sets the border colors for the top edge. See the -moz-border-colors-bottom property for more information.

-moz-box

-moz-box-align

The align attribute specifies how child elements of the box are aligned, when the size of the box is larger than the total size of the children. For boxes that have horizontal orientation, it specifies how its children will be aligned vertically. For boxes that have vertical orientation, it is used to specify how its children are algined horizontally. The pack attribute is related to the alignment but is used to specify the position in the opposite direction. You can also specify the value of align using the style property '-moz-box-align'.

start: Child elements are align starting from the left or top edge of the box. If the box is larger than the total size of the children, the extra space is placed on the right or bottom side.

center: Extra space is split equally along each side of the child elements, resulting the children being placed in the center of the box.

end: Child elements are placed on the right or bottom edge of the box. If the box is larger than the total size of the children, the extra space is placed on the left or top side.

baseline: This value applies to horizontally oriented boxes only. It causes the child elements to be aligned so that their text labels are lined up.

stretch: The child elements are stretched to fit the size of the box. For a horizontal box, the children are stretched to be the height of the box. For a vertical box, the children are stretched to be the width of the box. If the size of the box changes, the children stretch to fit. Use the flex attribute to create elements that stretch in the opposite direction.

-moz-box-direction

Specifies the direction in the which the children of a box are placed.

normal: Children are placed either from left to right or top to bottom in the order the elements appear in the XUL source or document tree.

reverse: Children are placed either from right to left or bottom to top in the order the elements appear in the XUL source or document tree.

-moz-box-flex

Indicates the flexibility of an element. Flexible elements grow and shrink to fit their given space. The actual value is not relevant unless there are other flexible elements within the same container. Elements with larger flex values will grow more than elements with lower flex values, at the ratio determined by the two elements.

-moz-box-ordinal-group

Indicates the ordinal group the element belongs to. Elements with a lower ordinal group are displayed before those with a higher ordinal group.

-moz-box-orient

This is the corresponding style property for a XUL element's orient attribute. For elements that are types of boxes, it determines whether the children are laid out horizontally or vertically.

horizontal: The children of the element are placed horizontally in a row.

vertical: The children of the element are placed vertically in a column.

-moz-box-pack

The pack attribute specifies where child elements of a XUL box are placed when the box is larger that the size of the children. For boxes with horizontal orientation, it is used to indicate the position of children horizontally. For boxes with vertical orientation, it is used to indicate the position of children vertically. The align attribute is used to specify the position in the opposite direction. You can also specify the value of -moz-box-pack using the attribute 'pack'.

start: Child elements are placed starting from the left or top edge of the box. If the box is larger than the total size of the children, the extra space is placed on the right or bottom side.

center: Extra space is split equally along each side of the child elements, resulting the children being placed in the center of the box.

end: Child elements are placed on the right or bottom edge of the box. If the box is larger than the total size of the children, the extra space is placed on the left or top side.

-moz-box-sizing

This property determines how the width and height of the element is calculated. It affects the width and height properties.

content-box: The width and height properties specify the size of the element including the padding.

border-box: The width and height properties specify the size of the element including the padding and border.

padding-box: The width and height properties specify the size of the element. The padding, border and margin are added outside of this size.

-moz-button

-moz-buttondefault

-moz-buttonhoverface

-moz-buttonhovertext

-moz-cell

-moz-cellhighlight

-moz-cellhighlighttext

-moz-center

-moz-cjk-earthly-branch

-moz-cjk-heavenly-stem

-moz-column-count

-moz-column-gap

-moz-column-width

-moz-compact

-moz-context-menu

-moz-copy

-moz-deck

-moz-desktop

-moz-devanagari

-moz-dialog

-moz-dialogtext

-moz-document

-moz-dragtargetzone

-moz-editor-invert-value

-moz-ethiopic-halehame

-moz-ethiopic-halehame-am

-moz-ethiopic-halehame-ti-er

-moz-ethiopic-halehame-ti-et

-moz-ethiopic-numeric

-moz-field

-moz-fieldtext

-moz-fixed

-moz-float-edge

-moz-force-broken-image-icon

-moz-grab

-moz-grabbing

-moz-grid

-moz-grid-group

-moz-grid-line

-moz-groupbox

-moz-gujarati

-moz-gurmukhi

-moz-hangul

-moz-hangul-consonant

-moz-hidden-unscrollable

-moz-hsla

-moz-hyperlinktext

-moz-image-region

For elements that have an image, this property sets the area of the
image that is used. You can set multiple elements to use the same
image but use a different region of the image, reducing the amount of
memory required. You can change this property to simulate
animation. The syntax is similar to the clip property. All four values
are relative to the upper left corner of the image.

-moz-image-region: rect(top, right, bottom, left);

-moz-info

-moz-initial

-moz-inline-block

-moz-inline-box

-moz-inline-grid

-moz-inline-stack

-moz-inline-table

-moz-japanese-formal

-moz-japanese-informal

-moz-kannada

-moz-khmer

-moz-lao

-moz-left

-moz-list

-moz-mac-accentdarkestshadow

-moz-mac-accentdarkshadow

-moz-mac-accentface

-moz-mac-accentlightesthighlight

-moz-mac-accentlightshadow

-moz-mac-accentregularhighlight

-moz-mac-accentregularshadow

-moz-mac-focusring

-moz-mac-menuselect

-moz-mac-menushadow

-moz-mac-menutextselect

-moz-malayalam

-moz-margin-end

-moz-margin-start

-moz-marker

-moz-math-columnline

-moz-math-firstcolumn

-moz-math-firstrow

-moz-math-font-size

-moz-math-font-style

-moz-math-lastcolumn

-moz-math-lastrow

-moz-math-rowline

-moz-menuhover

-moz-menuhovertext

-moz-myanmar

-moz-opacity

This property can be used to make an element partially transparent. Any content behind the element will be partially visible. This should be a decimal number between 0 and 1, where 0 means invisible and 1 means fully opaque. Thus, 0.5 means half-way between. Newer versions of Mozilla (1.7 and later) support the CSS3 property 'opacity'.

-moz-oriya

-moz-outline

This property can be used to set the outline of the element. An outline is like a border but has some differences in the way it is drawn. This is similar to the CSS2 outline property which Mozilla does not currently support.

-moz-outline-color

Sets the color of the outline.

-moz-outline-offset

-moz-outline-radius

This property can be used to give outlines rounded corners. This should be set to a numeric value indicating the amount of rounding to use. You must use a unit (usually px for pixels). A higher number makes the outline rounder.

-moz-outline-radius-bottomleft

Sets the rounding of the lower left corner of the outline.

-moz-outline-radius-bottomright

Sets the rounding of the lower right corner of the outline.

-moz-outline-radius-topleft

Sets the rounding of the upper left corner of the outline.

-moz-outline-radius-topright

Sets the rounding of the upper right corner of the outline.

-moz-outline-style

Sets the style of the border, which can have the same values as the border-style property.

-moz-outline-width

Sets the width of the outline.

-moz-padding-end

-moz-persian

-moz-popup

-moz-pre-wrap

-moz-pull-down-menu

-moz-rgba

-moz-right

-moz-run-in

-moz-scrollbars-horizontal

-moz-scrollbars-none

-moz-scrollbars-vertical

-moz-show-background

-moz-simp-chinese-formal

-moz-simp-chinese-informal

-moz-spinning

-moz-stack

-moz-tamil

-moz-telugu

-moz-thai

-moz-trad-chinese-formal

-moz-trad-chinese-informal

-moz-urdu

-moz-use-text-color

-moz-user-focus

Used to indicate whether the element can have the focus. By setting this to 'ignore', you can disable focusing the element, which means that the user will not be able to activate the element. The element will be skipped in the tab sequence. A similar property 'user-focus' has been proposed for CSS3.

ignore: The element does not accept the keyboard focus and will be skipped in the tab order.

normal: The element can accept the keyboard focus.

-moz-user-input

This can be used to indicate whether the value of the element can be modifed. This mainly applies to textboxes.

disabled: The user cannot edit the value of the textbox. The user may still select text in the textbox.

enabled: The user can edit the value of the textbox.

-moz-user-modify

-moz-user-select

Used to indicate whether the text of the element can be selected. This doesn't have any affect on content loaded as chrome, except in textboxes. A similar property 'user-select' has been proposed for CSS3.

none: The text of the element cannot be selected.

normal: The text can be selected by the user.

-moz-visitedhyperlinktext

-moz-window

-moz-workspace

-moz-zoom-in

-moz-zoom-out

-mozilla-keygen

display

Although the display property is part of standard CSS, some additional values are allowed, for the XUL layout styles. You can use these values for non-XUL elements too, although they may produce unusual results.

-moz-box: Child elements are laid out horizontally or vertically.

-moz-inline-box:

-moz-grid: Child elements are laid out as a XUL grid.

-moz-inline-grid:

-moz-grid-group: Child elements are laid out as a group of grid columns or rows. This is the layout used by the rows and columns elements. You can use the orientation (-moz-box-orient) to set which direction. Rows would normally have vertical orientation and columns would have a horizontal orientation.

-moz-grid-line: Child elements are laid out as a single column or row of a grid. You can use the orientation (-moz-box-orient) to set which direction.

-moz-stack: Child elements are laid out one on top of each other like the XUL stack element.

-moz-inline-stack:

-moz-deck: Child elements are laid out one on top of each other like the XUL deck element. Unlike a stack, only the top element is displayed.

-moz-popup:

-moz-groupbox:

Mozilla also accepts -moz-* values for certain CSS2 and CSS2.1 values of the display property that it does not yet support correctly (or at all):

-moz-inline-block

-moz-run-in

-moz-compact

-moz-marker

-moz-inline-table

overflow

Mozilla supports some additional values for the overflow property that are not in standard CSS. The overflow property is used to specify what happens when the content is too large for the container.

-moz-scrollbars-horizontal: Indicates that horizontal scrollbars should always appear and vertical scrollbars should never appear.

-moz-scrollbars-vertical: Indicates that vertical scrollbars should always appear and horizontal scrollbars should never appear.

-moz-scrollbars-none: Indicates that no scrollbars should appear but the element should be scrollable from script. (This is the same as hidden, and has been since Mozilla 1.6alpha.)

Revision Source

<p>Mozilla supports a number of extensions to <a href="en/CSS">CSS</a> that are prefaced by '-moz'. These include a number of capabilities, including rounded borders, and the ability to specify different box width and height calculations to more easily support browers that perform such calculations in a non-standard way.
</p><p>Some of these properties have subsequently been proposed for inclusion in the CSS standard, though the standard property may differ slightly from the -moz implementation.
</p><p>Some of these nonstandard properties apply only to <a href="en/XUL">XUL</a> elements.
</p>
<h3 name="-moz-activehyperlinktext"> -moz-activehyperlinktext </h3>
<h3 name="-moz-alias">-moz-alias</h3>
<p>This is a cursor value that Mozilla used (and still support) before CSS 3 <code>cursor: alias</code> was implemented. Now, since December 2004, (Gecko {{template.Abbr("rv", "Revision Version")}}:1.8a6) Mozilla Firefox, Mozilla 1.7+ and Seamonkey 1.x support and render the <a class="external" href="http://www.w3.org/TR/2004/CR-css3-ui-20040511/#drag-and">CSS 3 cursor alias</a>.
The -moz-alias cursor value is used to indicate an alias or shortcut to something that is to be created. The -moz-alias cursor (just like the alias cursor) is rendered as an arrow with a small curved arrow next to it.
</p><p>On the Windows platform, the -moz-alias cursor value can (could?) look like this: <img alt="Image:Cursor-moz_alias.png" src="File:en/Media_Gallery/Cursor-moz_alias.png">
</p><p>Since CSS3 <code>cursor: alias</code> is supported and rendered in Mozilla products, there is no need anymore to use <code>cursor: -moz-alias</code>.
</p>
Related bugzilla bugfile: <div class="bug"><a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=163174">Bug 163174: [FIX</a> Support CSS3 cursors]</div>
<h3 name="-moz-all"> -moz-all </h3>
<h3 name="-moz-anchor-decoration"> -moz-anchor-decoration </h3>
<h3 name="-moz-appearance"> -moz-appearance </h3>
<p>Used to cause an element to take its border, background style and size from the operating system's theme. This causes XUL elements to be drawn similar to the way the user's system draws such elements.
</p><p>The list of possible values below may be incomplete.
</p>
<ul><li> <b>none</b>: No special styling is applied. (Default)
</li><li> button
</li><li> button-small
</li><li> checkbox
</li><li> checkbox-container
</li><li> checkbox-small
</li><li> dialog
</li><li> listbox
</li><li> menu
</li><li> menulist
</li><li> menulist-button
</li><li> menulist-textfield
</li><li> progressbar
</li><li> radio
</li><li> radio-container
</li><li> radio-small
</li><li> scrollbar
</li><li> scrollbarbutton-down
</li><li> scrollbarbutton-left
</li><li> scrollbarbutton-right
</li><li> scrollbarbutton-up
</li><li> scrollbartrack-horizontal
</li><li> scrollbartrack-vertical
</li><li> separator
</li><li> statusbar
</li><li> tab
</li><li> tab-left-edge
</li><li> tabpanels
</li><li> textfield
</li><li> toolbar
</li><li> toolbarbutton
</li><li> toolbarbutton
</li><li> toolbox
</li><li> tooltip
</li><li> treeheadercell
</li><li> treeheadersortarrow
</li><li> treeitem
</li><li> treetwisty
</li><li> treetwistyopen
</li><li> treeview
</li></ul>
<h3 name="-moz-arabic-indic"> -moz-arabic-indic </h3>
<h3 name="-moz-background-clip"> -moz-background-clip </h3>
<p>Indicates whether the background, either the color or image, should extend into the border area of the element. This property is similar to the CSS3 <a class="external" href="http://www.w3.org/TR/css3-background/#the-background-clip">background-clip</a> property.
</p>
<ul><li> border: The background extends into the border of the element. It will be drawn behind the border.
</li><li> padding: The background does not extend into the border.
</li></ul>
<h3 name="-moz-background-inline-policy"> -moz-background-inline-policy </h3>
<p>Specifies how the background image of an inline element is determined when the content of the inline element wraps onto multiple lines.
</p>
<ul><li> bounding-box:
</li><li> continuous: The background image wraps around on to each line as if the text had no line breaks. For example, if the image is 500 pixels and the inline box is 300 pixels, the first 300 pixels of the image appears on the first line, and the last 200 pixels followed by the first 100 pixels of the image appear on the second line. The image repeats until the end of the content.
</li><li> each-box:
</li></ul>
<h3 name="-moz-background-origin"> -moz-background-origin </h3>
<p>Determines how the background-position property is determined. This property is similar to the CSS3 background-origin property.
</p>
<ul><li> content: The position is relative to the content.
</li><li> border: The position is relative to the border.
</li><li> padding: The position is relative to the padding.
</li></ul>
<h3 name="-moz-bengali"> -moz-bengali </h3>
<h3 name="-moz-bg-inset"> -moz-bg-inset </h3>
<h3 name="-moz-bg-outset"> -moz-bg-outset </h3>
<h3 name="-moz-bg-solid"> -moz-bg-solid </h3>
<h3 name="-moz-binding"> -moz-binding </h3>
<p>Used to specify an <a href="en/XBL">XBL</a> binding to use for the element. The property should be a URL of an XBL file containing the binding. The URL should contain an anchor to point to a specific binding with the XBL file, referenced by its id attribute.
</p>
<h3 name="-moz-border-bottom-colors"> -moz-border-bottom-colors </h3>
<p>Sets the border colors for the bottom edge. It should be set to a list of colors. When an element has a border that is larger than a single pixel, each line of pixels uses the next color specified in this property. This eliminates the need for nested boxes. If the border is wider than the number of colors specified for this property, the remaining part of the border is the color specified by the border property.
</p>
<h3 name="-moz-border-left-colors"> -moz-border-left-colors </h3>
<p>Sets the border colors for the left edge. See the -moz-border-colors-bottom property for more information.
</p>
<h3 name="-moz-border-radius"> -moz-border-radius </h3>
<p>This property can be used to give borders rounded corners. It is similar to the <a class="external" href="http://www.w3.org/TR/css3-background/#the-border-radius">border-radius</a> property in the <a class="external" href="http://www.w3.org/TR/css3-background/">CSS3 Backgrounds and Borders Module</a>. This should be set to a numeric value indicating the amount of rounding to use. You must use a unit (such as px or em). A higher number makes the border rounder.
</p><p>There are some important bugs remaining that you should be aware of it you plan on using this property: <a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=24998">background images spill beyond rounded borders</a>, the rounded border currently has <a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=16380">no anti-aliasing</a>, and rounded borders <a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=13944">only support a border-style of solid</a>.
</p>
<h3 name="-moz-border-radius-bottomleft"> -moz-border-radius-bottomleft </h3>
<p>Sets the rounding of the lower left corner of the border.
</p>
<h3 name="-moz-border-radius-bottomright"> -moz-border-radius-bottomright </h3>
<p>Sets the rounding of the lower right corner of the border.
</p>
<h3 name="-moz-border-radius-topleft"> -moz-border-radius-topleft </h3>
<p>Sets the rounding of the upper left corner of the border.
</p>
<h3 name="-moz-border-radius-topright"> -moz-border-radius-topright </h3>
<p>Sets the rounding of the upper left corner of the border.
</p>
<h3 name="-moz-border-right-colors"> -moz-border-right-colors </h3>
<p>Sets the border colors for the right edge. See the -moz-border-colors-bottom property for more information.
</p>
<h3 name="-moz-border-top-colors"> -moz-border-top-colors </h3>
<p>Sets the border colors for the top edge. See the -moz-border-colors-bottom property for more information.
</p>
<h3 name="-moz-box"> -moz-box </h3>
<h3 name="-moz-box-align"> -moz-box-align </h3>
<p>The align attribute specifies how child elements of the box are aligned, when the size of the box is larger than the total size of the children. For boxes that have horizontal orientation, it specifies how its children will be aligned vertically. For boxes that have vertical orientation, it is used to specify how its children are algined horizontally. The pack attribute is related to the alignment but is used to specify the position in the opposite direction. You can also specify the value of align using the style property '-moz-box-align'.
</p>
<ul><li> start: Child elements are align starting from the left or top edge of the box. If the box is larger than the total size of the children, the extra space is placed on the right or bottom side.
</li><li> center: Extra space is split equally along each side of the child elements, resulting the children being placed in the center of the box.
</li><li> end: Child elements are placed on the right or bottom edge of the box. If the box is larger than the total size of the children, the extra space is placed on the left or top side.
</li><li> baseline: This value applies to horizontally oriented boxes only. It causes the child elements to be aligned so that their text labels are lined up.
</li><li> stretch: The child elements are stretched to fit the size of the box. For a horizontal box, the children are stretched to be the height of the box. For a vertical box, the children are stretched to be the width of the box. If the size of the box changes, the children stretch to fit. Use the flex attribute to create elements that stretch in the opposite direction.
</li></ul>
<p><br>
</p>
<h3 name="-moz-box-direction"> -moz-box-direction </h3>
<p>Specifies the direction in the which the children of a box are placed.
</p>
<ul><li> normal: Children are placed either from left to right or top to bottom in the order the elements appear in the XUL source or document tree.
</li><li> reverse: Children are placed either from right to left or bottom to top in the order the elements appear in the XUL source or document tree.
</li></ul>
<h3 name="-moz-box-flex"> -moz-box-flex </h3>
<p>Indicates the flexibility of an element. Flexible elements grow and shrink to fit their given space. The actual value is not relevant unless there are other flexible elements within the same container. Elements with larger flex values will grow more than elements with lower flex values, at the ratio determined by the two elements.
</p>
<h3 name="-moz-box-ordinal-group"> -moz-box-ordinal-group </h3>
<p>Indicates the ordinal group the element belongs to. Elements with a lower ordinal group are displayed before those with a higher ordinal group.
</p>
<h3 name="-moz-box-orient"> -moz-box-orient </h3>
<p>This is the corresponding style property for a XUL element's orient attribute. For elements that are types of boxes, it determines whether the children are laid out horizontally or vertically.
</p>
<ul><li> horizontal: The children of the element are placed horizontally in a row.
</li><li> vertical: The children of the element are placed vertically in a column.
</li></ul>
<h3 name="-moz-box-pack"> -moz-box-pack </h3>
<p>The pack attribute specifies where child elements of a XUL box are placed when the box is larger that the size of the children. For boxes with horizontal orientation, it is used to indicate the position of children horizontally. For boxes with vertical orientation, it is used to indicate the position of children vertically. The align attribute is used to specify the position in the opposite direction. You can also specify the value of -moz-box-pack using the attribute 'pack'.
</p>
<ul><li> start: Child elements are placed starting from the left or top edge of the box. If the box is larger than the total size of the children, the extra space is placed on the right or bottom side.
</li><li> center: Extra space is split equally along each side of the child elements, resulting the children being placed in the center of the box.
</li><li> end: Child elements are placed on the right or bottom edge of the box. If the box is larger than the total size of the children, the extra space is placed on the left or top side.
</li></ul>
<p><br>
</p>
<h3 name="-moz-box-sizing"> -moz-box-sizing </h3>
<p>This property determines how the width and height of the element is calculated. It affects the width and height properties.
</p>
<ul><li> content-box: The width and height properties specify the size of the element including the padding.
</li><li> border-box: The width and height properties specify the size of the element including the padding and border.
</li><li> padding-box: The width and height properties specify the size of the element. The padding, border and margin are added outside of this size.
</li></ul>
<p><br>
</p>
<h3 name="-moz-button"> -moz-button </h3>
<h3 name="-moz-buttondefault"> -moz-buttondefault </h3>
<h3 name="-moz-buttonhoverface"> -moz-buttonhoverface </h3>
<h3 name="-moz-buttonhovertext"> -moz-buttonhovertext </h3>
<h3 name="-moz-cell"> -moz-cell </h3>
<h3 name="-moz-cellhighlight"> -moz-cellhighlight </h3>
<h3 name="-moz-cellhighlighttext"> -moz-cellhighlighttext </h3>
<h3 name="-moz-center"> -moz-center </h3>
<h3 name="-moz-cjk-earthly-branch"> -moz-cjk-earthly-branch </h3>
<h3 name="-moz-cjk-heavenly-stem"> -moz-cjk-heavenly-stem </h3>
<h3 name="-moz-column-count"> -moz-column-count </h3>
<h3 name="-moz-column-gap"> -moz-column-gap </h3>
<h3 name="-moz-column-width"> -moz-column-width </h3>
<h3 name="-moz-compact"> -moz-compact </h3>
<h3 name="-moz-context-menu"> -moz-context-menu </h3>
<h3 name="-moz-copy"> -moz-copy </h3>
<h3 name="-moz-deck"> -moz-deck </h3>
<h3 name="-moz-desktop"> -moz-desktop </h3>
<h3 name="-moz-devanagari"> -moz-devanagari </h3>
<h3 name="-moz-dialog"> -moz-dialog </h3>
<h3 name="-moz-dialogtext"> -moz-dialogtext </h3>
<h3 name="-moz-document"> -moz-document </h3>
<h3 name="-moz-dragtargetzone"> -moz-dragtargetzone </h3>
<h3 name="-moz-editor-invert-value"> -moz-editor-invert-value </h3>
<h3 name="-moz-ethiopic-halehame"> -moz-ethiopic-halehame </h3>
<h3 name="-moz-ethiopic-halehame-am"> -moz-ethiopic-halehame-am </h3>
<h3 name="-moz-ethiopic-halehame-ti-er"> -moz-ethiopic-halehame-ti-er </h3>
<h3 name="-moz-ethiopic-halehame-ti-et"> -moz-ethiopic-halehame-ti-et </h3>
<h3 name="-moz-ethiopic-numeric"> -moz-ethiopic-numeric </h3>
<h3 name="-moz-field"> -moz-field </h3>
<h3 name="-moz-fieldtext"> -moz-fieldtext </h3>
<h3 name="-moz-fixed"> -moz-fixed </h3>
<h3 name="-moz-float-edge"> -moz-float-edge </h3>
<h3 name="-moz-force-broken-image-icon"> -moz-force-broken-image-icon </h3>
<h3 name="-moz-grab"> -moz-grab </h3>
<h3 name="-moz-grabbing"> -moz-grabbing </h3>
<h3 name="-moz-grid"> -moz-grid </h3>
<h3 name="-moz-grid-group"> -moz-grid-group </h3>
<h3 name="-moz-grid-line"> -moz-grid-line </h3>
<h3 name="-moz-groupbox"> -moz-groupbox </h3>
<h3 name="-moz-gujarati"> -moz-gujarati </h3>
<h3 name="-moz-gurmukhi"> -moz-gurmukhi </h3>
<h3 name="-moz-hangul"> -moz-hangul </h3>
<h3 name="-moz-hangul-consonant"> -moz-hangul-consonant </h3>
<h3 name="-moz-hidden-unscrollable"> -moz-hidden-unscrollable </h3>
<h3 name="-moz-hsla"> -moz-hsla </h3>
<h3 name="-moz-hyperlinktext"> -moz-hyperlinktext </h3>
<h3 name="-moz-image-region"> -moz-image-region </h3>
<p>For elements that have an image, this property sets the area of the
image that is used. You can set multiple elements to use the same
image but use a different region of the image, reducing the amount of
memory required. You can change this property to simulate
animation. The syntax is similar to the clip property. All four values
are relative to the upper left corner of the image.
</p>
<pre class="eval">-moz-image-region: rect(top, right, bottom, left);
</pre>
<h3 name="-moz-info"> -moz-info </h3>
<h3 name="-moz-initial"> -moz-initial </h3>
<h3 name="-moz-inline-block"> -moz-inline-block </h3>
<h3 name="-moz-inline-box"> -moz-inline-box </h3>
<h3 name="-moz-inline-grid"> -moz-inline-grid </h3>
<h3 name="-moz-inline-stack"> -moz-inline-stack </h3>
<h3 name="-moz-inline-table"> -moz-inline-table </h3>
<h3 name="-moz-japanese-formal"> -moz-japanese-formal </h3>
<h3 name="-moz-japanese-informal"> -moz-japanese-informal </h3>
<h3 name="-moz-kannada"> -moz-kannada </h3>
<h3 name="-moz-khmer"> -moz-khmer </h3>
<h3 name="-moz-lao"> -moz-lao </h3>
<h3 name="-moz-left"> -moz-left </h3>
<h3 name="-moz-list"> -moz-list </h3>
<h3 name="-moz-mac-accentdarkestshadow"> -moz-mac-accentdarkestshadow </h3>
<h3 name="-moz-mac-accentdarkshadow"> -moz-mac-accentdarkshadow </h3>
<h3 name="-moz-mac-accentface"> -moz-mac-accentface </h3>
<h3 name="-moz-mac-accentlightesthighlight"> -moz-mac-accentlightesthighlight </h3>
<h3 name="-moz-mac-accentlightshadow"> -moz-mac-accentlightshadow </h3>
<h3 name="-moz-mac-accentregularhighlight"> -moz-mac-accentregularhighlight </h3>
<h3 name="-moz-mac-accentregularshadow"> -moz-mac-accentregularshadow </h3>
<h3 name="-moz-mac-focusring"> -moz-mac-focusring </h3>
<h3 name="-moz-mac-menuselect"> -moz-mac-menuselect </h3>
<h3 name="-moz-mac-menushadow"> -moz-mac-menushadow </h3>
<h3 name="-moz-mac-menutextselect"> -moz-mac-menutextselect </h3>
<h3 name="-moz-malayalam"> -moz-malayalam </h3>
<h3 name="-moz-margin-end"> -moz-margin-end </h3>
<h3 name="-moz-margin-start"> -moz-margin-start </h3>
<h3 name="-moz-marker"> -moz-marker </h3>
<h3 name="-moz-math-columnline"> -moz-math-columnline </h3>
<h3 name="-moz-math-firstcolumn"> -moz-math-firstcolumn </h3>
<h3 name="-moz-math-firstrow"> -moz-math-firstrow </h3>
<h3 name="-moz-math-font-size"> -moz-math-font-size </h3>
<h3 name="-moz-math-font-style"> -moz-math-font-style </h3>
<h3 name="-moz-math-lastcolumn"> -moz-math-lastcolumn </h3>
<h3 name="-moz-math-lastrow"> -moz-math-lastrow </h3>
<h3 name="-moz-math-rowline"> -moz-math-rowline </h3>
<h3 name="-moz-menuhover"> -moz-menuhover </h3>
<h3 name="-moz-menuhovertext"> -moz-menuhovertext </h3>
<h3 name="-moz-myanmar"> -moz-myanmar </h3>
<h3 name="-moz-opacity"> -moz-opacity </h3>
<p>This property can be used to make an element partially transparent. Any content behind the element will be partially visible. This should be a decimal number between 0 and 1, where 0 means invisible and 1 means fully opaque. Thus, 0.5 means half-way between. Newer versions of Mozilla (1.7 and later) support the CSS3 property 'opacity'.
</p>
<h3 name="-moz-oriya"> -moz-oriya </h3>
<h3 name="-moz-outline"> -moz-outline </h3>
<p>This property can be used to set the outline of the element. An outline is like a border but has some differences in the way it is drawn. This is similar to the CSS2 outline property which Mozilla does not currently support.
</p>
<h3 name="-moz-outline-color"> -moz-outline-color </h3>
<p>Sets the color of the outline.
</p>
<h3 name="-moz-outline-offset"> -moz-outline-offset </h3>
<h3 name="-moz-outline-radius"> -moz-outline-radius </h3>
<p>This property can be used to give outlines rounded corners. This should be set to a numeric value indicating the amount of rounding to use. You must use a unit (usually px for pixels). A higher number makes the outline rounder.
</p>
<h3 name="-moz-outline-radius-bottomleft"> -moz-outline-radius-bottomleft </h3>
<p>Sets the rounding of the lower left corner of the outline.
</p>
<h3 name="-moz-outline-radius-bottomright"> -moz-outline-radius-bottomright </h3>
<p>Sets the rounding of the lower right corner of the outline.
</p>
<h3 name="-moz-outline-radius-topleft"> -moz-outline-radius-topleft </h3>
<p>Sets the rounding of the upper left corner of the outline.
</p>
<h3 name="-moz-outline-radius-topright"> -moz-outline-radius-topright </h3>
<p>Sets the rounding of the upper right corner of the outline.
</p>
<h3 name="-moz-outline-style"> -moz-outline-style </h3>
<p>Sets the style of the border, which can have the same values as the border-style property.
</p>
<h3 name="-moz-outline-width"> -moz-outline-width </h3>
<p>Sets the width of the outline.
</p>
<h3 name="-moz-padding-end"> -moz-padding-end </h3>
<h3 name="-moz-persian"> -moz-persian </h3>
<h3 name="-moz-popup"> -moz-popup </h3>
<h3 name="-moz-pre-wrap"> -moz-pre-wrap </h3>
<h3 name="-moz-pull-down-menu"> -moz-pull-down-menu </h3>
<h3 name="-moz-rgba"> -moz-rgba </h3>
<h3 name="-moz-right"> -moz-right </h3>
<h3 name="-moz-run-in"> -moz-run-in </h3>
<h3 name="-moz-scrollbars-horizontal"> -moz-scrollbars-horizontal </h3>
<h3 name="-moz-scrollbars-none"> -moz-scrollbars-none </h3>
<h3 name="-moz-scrollbars-vertical"> -moz-scrollbars-vertical </h3>
<h3 name="-moz-show-background"> -moz-show-background </h3>
<h3 name="-moz-simp-chinese-formal"> -moz-simp-chinese-formal </h3>
<h3 name="-moz-simp-chinese-informal"> -moz-simp-chinese-informal </h3>
<h3 name="-moz-spinning"> -moz-spinning </h3>
<h3 name="-moz-stack"> -moz-stack </h3>
<h3 name="-moz-tamil"> -moz-tamil </h3>
<h3 name="-moz-telugu"> -moz-telugu </h3>
<h3 name="-moz-thai"> -moz-thai </h3>
<h3 name="-moz-trad-chinese-formal"> -moz-trad-chinese-formal </h3>
<h3 name="-moz-trad-chinese-informal"> -moz-trad-chinese-informal </h3>
<h3 name="-moz-urdu"> -moz-urdu </h3>
<h3 name="-moz-use-text-color"> -moz-use-text-color </h3>
<h3 name="-moz-user-focus"> -moz-user-focus </h3>
<p>Used to indicate whether the element can have the focus. By setting this to 'ignore', you can disable focusing the element, which means that the user will not be able to activate the element. The element will be skipped in the tab sequence. A similar property 'user-focus' has been proposed for CSS3.
</p>
<ul><li> ignore: The element does not accept the keyboard focus and will be skipped in the tab order.
</li><li> normal: The element can accept the keyboard focus.
</li></ul>
<h3 name="-moz-user-input"> -moz-user-input </h3>
<p>This can be used to indicate whether the value of the element can be modifed. This mainly applies to textboxes.
</p>
<ul><li> disabled: The user cannot edit the value of the textbox. The user may still select text in the textbox.
</li><li> enabled: The user can edit the value of the textbox.
</li></ul>
<h3 name="-moz-user-modify"> -moz-user-modify </h3>
<h3 name="-moz-user-select"> -moz-user-select </h3>
<p>Used to indicate whether the text of the element can be selected. This doesn't have any affect on content loaded as chrome, except in textboxes. A similar property 'user-select' has been proposed for CSS3.
</p>
<ul><li> none: The text of the element cannot be selected.
</li><li> normal: The text can be selected by the user.
</li></ul>
<h3 name="-moz-visitedhyperlinktext"> -moz-visitedhyperlinktext </h3>
<h3 name="-moz-window"> -moz-window </h3>
<h3 name="-moz-workspace"> -moz-workspace </h3>
<h3 name="-moz-zoom-in"> -moz-zoom-in </h3>
<h3 name="-moz-zoom-out"> -moz-zoom-out </h3>
<h3 name="-mozilla-keygen"> -mozilla-keygen </h3>
<h3 name="display"> display </h3>
<p>Although the display property is part of standard CSS, some additional values are allowed, for the XUL layout styles. You can use these values for non-XUL elements too, although they may produce unusual results.
</p>
<ul><li> -moz-box: Child elements are laid out horizontally or vertically.
</li><li> -moz-inline-box:
</li><li> -moz-grid: Child elements are laid out as a XUL grid.
</li><li> -moz-inline-grid:
</li><li> -moz-grid-group: Child elements are laid out as a group of grid columns or rows. This is the layout used by the rows and columns elements. You can use the orientation (-moz-box-orient) to set which direction. Rows would normally have vertical orientation and columns would have a horizontal orientation.
</li><li> -moz-grid-line: Child elements are laid out as a single column or row of a grid. You can use the orientation (-moz-box-orient) to set which direction.
</li><li> -moz-stack: Child elements are laid out one on top of each other like the XUL stack element.
</li><li> -moz-inline-stack:
</li><li> -moz-deck: Child elements are laid out one on top of each other like the XUL deck element. Unlike a stack, only the top element is displayed.
</li><li> -moz-popup:
</li><li> -moz-groupbox:
</li></ul>
<p>Mozilla also accepts -moz-* values for certain CSS2 and CSS2.1 values of the display property that it does not yet support correctly (or at all):
</p>
<ul><li> -moz-inline-block
</li><li> -moz-run-in
</li><li> -moz-compact
</li><li> -moz-marker
</li><li> -moz-inline-table
</li></ul>
<h3 name="overflow"> overflow </h3>
<p>Mozilla supports some additional values for the overflow property that are not in standard CSS. The overflow property is used to specify what happens when the content is too large for the container.
</p>
<ul><li> -moz-scrollbars-horizontal: Indicates that horizontal scrollbars should always appear and vertical scrollbars should never appear.
</li><li> -moz-scrollbars-vertical: Indicates that vertical scrollbars should always appear and horizontal scrollbars should never appear.
</li><li> -moz-scrollbars-none: Indicates that no scrollbars should appear but the element should be scrollable from script. (This is the same as hidden, and has been since Mozilla 1.6alpha.)
</li></ul>