You are here: Reference > CSS > properties

CSS properties

Box-Model:

Border properties:
Property Support Description
border
Sets up to three separate border properties, in a shorthand form.
border-bottom
Sets the color, style and width properties for the element's bottom border, in a shorthand form.
border-bottom-color
Specifies the color of the element's bottom border.
border-bottom-style
Specifies the style of the element's bottom border.
border-bottom-width
Specifies the width of the element's bottom border.
border-color
Specifies the color of the element's border.
border-left
Specifies the color, style and width properties for the element's left border, in a shorthand form.
border-left-color
Specifies the color of the element's left border.
border-left-style
Specifies the style of the element's left border.
border-left-width
Specifies the width of the element's left border.
border-right
Specifies the color, style and width properties for the element's right border, in a shorthand form.
border-right-color
Specifies the color of the element's right border.
border-right-style
Specifies the style of the element's right border.
border-right-width
Specifies the width of the element's right border.
border-style
Specifies the style of the element's border.
border-top
Specifies the color, style and width properties for the element's top border, in a shorthand form.
border-top-color
Specifies the color of the element's top border.
border-top-style
Specifies the style of the element's top border.
border-top-width
Specifies the width of the element's top border.
border-width
Specifies the width of the element's border.
Margin properties:
Property Support Description
margin
Specifies a shorthand property for setting the top, right, bottom and left margins, in that order.
margin-bottom
Specifies the bottom margin of the object.
margin-left
Specifies the left margin of the object.
margin-right
Specifies the right margin of the object.
margin-top
Specifies the top margin of the object.
Padding properties:
Property Support Description
padding
Specifies a shorthand property for setting the top, right, bottom and left spaces between an element's border and its contents, in that order.
padding-bottom
Specifies the space between an element's bottom border and its contents.
padding-left
Specifies the space between an element's left border and its contents.
padding-right
Specifies the space between an element's right border and its contents.
padding-top
Specifies the space between an element's top border and its contents.
Outline properties:
Property Support Description
outline
8
Specifies a shorthand form for all outline properties at once. Outline is a line around an element, but different from the border property.
outline-color
8
Specifies the color for the outline for an element.
outline-offset
Sets the amount of space between the outline and the border or the edge of the element.
outline-style
8
Specifies the style for an element's outline.
outline-width
8
Specifies the width for an element's outline.

Background properties:

Property Support Description
background
Specifies up to five separate background properties, in a shorthand form.
background-attachment
Specifies whether the background-image should scroll with the contents of the object or not.
background-color
Specifies the color to use for the background of the object.
background-image
Specifies the image to use as the background of the object.
background-position
Sets the position of the background-image within the element.
background-position-x
Specifies the horizontal coordinate of the background-image relative to the upper-left corner of the container object.
background-position-y
Specifies the vertical-coordinate of the background-image relative to the upper-left corner of the container object.
background-repeat
Specifies how to tile the background-image relative to the upper-left corner of the container object.

Scrollbar properties:

Property Support Description
scrollbar-3dlight-color
Specifies the color of the outer top and left bevel edges of the scroll box and scroll arrows of the scroll bar.
scrollbar-arrow-color
Specifies the color of the arrow of the scroll bar.
scrollbar-base-color
Specifies the main color of the scroll bar.
scrollbar-darkshadow-color
Specifies the color of the outer bottom and right bevel edges of the scroll box and scroll arrows of the scroll bar.
scrollbar-face-color
Specifies the color for the face of the scroll bar.
scrollbar-highlight-color
Specifies the color of the top and left edges of the scroll bar.
scrollbar-shadow-color
Specifies the color of the bottom and right edges of the scroll bar.
scrollbar-track-color
Specifies the color of the scroll bar's track element.

Text and font properties:

Font properties:
Property Support Description
color
Specifies the color of the element's text content.
font
Specifies up to six separate font properties, in a shorthand form.
font-family
Specifies the font face for text.
font-size
Specifies the font size of the text.
font-size-adjust
Specifies font aspect value (font size divided by x-height).
font-style
Specifies whether the style of the font is normal, italic or oblique.
font-variant
Specifies a variation of the specified or default font-family.
font-weight
Specifies the font weight of the text.
text-decoration
Specifies the appearance characteristics of text, whether it is underlined, overlined, lined-through or blinking text.
text-shadow
3.5
Specifies a comma-separated list of shadow effects to be applied to the text of the element.
text-underline-position
Specifies the position of the underline decoration.
Text properties:
Property Support Description
direction
Specifies the text direction.
letter-spacing
Specifies the amount of space between letters.
line-height
Specifies the distance between lines of text in a block-level element.
text-align
Specifies the horizontal alignment of the text within the element.
text-align-last
Specifies the alignment type of the last or only line of text in the element's contents.
text-autospace
Specifies the spacing rules between Western and Asian-based (such as Japanese and Chinese) characters.
text-indent
Specifies the horizontal indent for the first line of text.
text-justify
Specifies how justified text should be aligned and spaced.
text-kashida-space
Specifies how to justify lines of text by elongating characters at algorithmically-selected points in Arabic writing systems.
text-overflow
Specifies how to handle the overflowed area of text.
text-transform
Specifies the case of the text.
unicode-bidi
Specifies whether the text should be overridden to support multiple languages in the same document. Use with the direction property.
word-spacing
Specifies the spacing between words.
writing-mode
Specifies the intrinsic writing direction of the element's content.
Text layout:
Property Support Description
layout-flow
Specifies the flow and direction of the content in an element.
layout-grid
Specifies up to four separate layout-grid properties that specify the layout of text characters.
layout-grid-char
Specifies the size of the character grid for the layout of an element's text content.
layout-grid-line
Specifies the gridline value used for laying out Japanese or Chinese characters in a web document.
layout-grid-mode
Specifies whether the text layout grid uses one or two dimensions.
layout-grid-type
Specifies the type of grid to be used for laying out Japanese or Chinese characters in a web document.
Breaking rules:
Property Support Description
line-break
Specifies the line-breaking rules for Chinese, Japanese or Korean text.
white-space
Specifies how spaces, tabs, and newline characters inside the element are handled.
word-break
Specifies the line breaking rule within words.
word-wrap
3.5
Specifies whether the current line should break if the content exceeds the boundaries of its container.

Element type properties:

Ruby element properties:
Property Support Description
ruby-align
Specifies the horizontal alignment of the Ruby text defined by the rt tag, relative to the base text defined by the ruby tag.
ruby-overhang
Specifies the Ruby text position, relative to the base text defined by the ruby tag.
ruby-position
Specifies the position of the Ruby text (rt).
Table element properties:
Property Support Description
border-collapse
Specifies whether the borders of a table are joined in a single border or not.
border-spacing
8
Specifies the space between cells in a table.
caption-side
8
Specifies the position of the caption box within a table element.
empty-cells
8
Specifies whether the border and background of empty table cells should be shown or not.
table-layout
Specifies the way to lay out table cells, rows, and columns.
List element properties:
Property Support Description
list-style
Specifies up to three separate listStyle properties for an object.
list-style-image
Specifies a graphic image for a list label.
list-style-position
Specifies whether the list marker for a list item should appear inside or outside the list-item box.
list-style-type
Specifies the style of the list marker bullet or numbering system within a list.
Input element properties:
Property Support Description
ime-mode
3
Specifies the state of an Input Method Editor (IME) for user text entry fields. IME allows users to enter and edit Chinese, Japanese, and Korean characters.

Mouse properties:

Property Support Description
cursor
Specifies the type of cursor to display for the pointing device (mouse).

Aural properties:

Property Support Description
cue
Specifies the cue-before and cue-after properties in a shorthand form in aural style sheets.
cue-after
Specifies the sound file to play after an element.
cue-before
Specifies the sound file to play before an element.
orphans
8
Specifies the minimum number of lines at the start of an element's rendered content that must be visible at the bottom of a page.
pause
Specifies a shorthand property for setting the pause-before and pause-after properties for speaking the element's content.
pause-after
Specifies that the browser should insert a pause after speaking the element's content.
pause-before
Specifies that the browser should insert a pause before speaking the element's content.
rest
Specifies a shorthand property for setting the rest-before and rest-after properties for speaking the element's content.
rest-after
Specifies that the browser should insert a rest after speaking the element's content.
rest-before
Specifies that the browser should insert a rest before speaking the element's content.
speak
Specifies how the browser should speak the content.
voice-family
Specifies the type of voice to use as speak control.

Element display properties:

Element dimension properties:
Property Support Description
box-sizing
8
Specifies how the width and the height of the element are calculated. It affects the height and width properties.
height
Specifies the height of the visible area for an element.
max-height
7
Specifies the maximum height for the visible area of an element.
max-width
7
Specifies the maximum width for the visible area of an element.
min-height
Specifies a minimum height for the visible area of an element.
min-width
7
Specifies the minimum width for the visible area of an element.
resize
Specifies whether an element is resizable and if so, along which axis.
width
Specifies the width of the visible area for an element.
Element position properties:
Property Support Description
bottom
Specifies the bottom coordinate of a positioned element.
left
Specifies the left coordinate of a positioned element.
position
Specifies what type of positioning method is used to render the current element.
right
Specifies the right coordinate of a positioned element.
top
Specifies the top coordinate of a positioned element.
Overflowing content:
Property Support Description
overflow
Specifies what to do with content outside the element's rendering area.
overflow-x
3.510
Specifies what to do with content that exceeds the element's width.
overflow-y
3.510
Specifies what to do with content that exceeds the element's height.
Visual appearances:
Property Support Description
clear
Specifies the position of the element relative to floating objects.
clip
Specifies which part of a positioned element is visible.
display
Specifies the element's display type.
filter
Specifies the filter or collection of filters applied to the object.
float
Specifies the horizontal alignment of the object.
image-rendering
3.6
Specifies the rendering mode for scaled images.
opacity
9
Sets the transparency level of an element. For Internet Explorer, use filter with 'Alpha(opacity=percent)'.
vertical-align
Specifies how to align an element vertically.
visibility
Specifies whether the element is visible.
z-index
Specifies the stack level of positioned objects.
zoom
Specifies the zoom level of the element's content.

Generated content properties:

Property Support Description
content
8
Specifies the generated content after or before the element.
counter-increment
8
Specifies the list of counters and increment values.
counter-reset
8
Sets the list of counters and their initial values.
quotes
8
Specifies the pairs of quotation marks for the 'open-quote' and 'close-quote' values of the content property.

Print and print preview specific properties:

Property Support Description
page-break-after
Specifies whether a page break occurs after the object when printing.
page-break-before
Specifies whether a page break occurs before the object when printing.
page-break-inside
8
Specifies the page-breaking behavior that should occur inside an element's rendering box when printing.
widows
8
Specifies the minimum number of lines at the end of an element's rendered content that must be visible at the top of a page.

Internet Explorer specific properties:

Property Support Description
-ms-interpolation-mode
7
Sets the interpolation algorithm for scaling an image.
accelerator
Specifies whether the object contains an accelerator key.
behavior
Sets the URL of a behavior file.

Mozilla (Firefox) specific properties:

Visual properties:
Property Support Description
-moz-appearance
Specifies theme rendering mode for an element. Allows you to make an element look like a standard user interface element.
-moz-float-edge
Specifies whether the height and width properties of the element include the margin, border, or padding thickness.
-moz-opacity
Sets the opacity level. For a cross-browser solution, use the opacity property in Firefox, Google Chrome, Safari and Opera, and the filter property ('filter:Alpha(opacity=50)') in Internet Explorer.
-moz-transform
Specifies the two-dimensional linear transformation applied to an element. The origin of the transformation is specified by the -moz-transform-origin property.
-moz-transform-origin
Specifies the origin of two-dimensional linear transformations specified with the -moz-transform property.
Background properties:
Property Support Description
-moz-background-clip
Sets which part of background is visible.
-moz-background-inline-policy
Specifies how the background-image of an inline element is determined when the contents of the inline element wrap onto multiple lines.
-moz-background-origin
Specifies how the background-position property is determined, i.e. it defines the reference point that the background-image is relative to.
Border properties:
Property Support Description
-moz-border-bottom-colors
Sets the border colors for the bottom edge. You can specify as many color values as you want. All specified colors will appear as a 1px thick line.
-moz-border-end
Specifies the color, style and width properties for the end of the element's border, in a shorthand form. Use the border-left property instead.
-moz-border-end-color
Sets the color of the element's border end. Use the border-left-color property instead.
-moz-border-end-style
Sets the style of the element's border end. Use the border-left-style property instead.
-moz-border-end-width
Sets the width of the element's border end. Use the border-left-width property instead.
-moz-border-image
3.5
Specifies an image to use as the border of the element. The image is sliced into 9 pieces along the four diagonals specified with the length units.
-moz-border-left-colors
Sets the border colors for the left edge. You can specify as many color values as you want. All specified colors will appear as a 1px thick line.
-moz-border-radius
Sets the rounding of the corners of the border.
-moz-border-radius-bottomleft
Sets the rounding of the lower left corner of the border.
-moz-border-radius-bottomright
Sets the rounding of the lower right corner of the border.
-moz-border-radius-topleft
Sets the rounding of the upper left corner of the border.
-moz-border-radius-topright
Sets the rounding of the upper right corner of the border.
-moz-border-right-colors
Sets the border colors for the right edge. You can specify as many color values as you want. All specified colors will appear as a 1px thick line.
-moz-border-start
Specifies the color, style and width properties for the start of the element's border. Use the border-right property instead.
-moz-border-start-color
Specifies the color of the element's border start. Use the border-right-color property instead.
-moz-border-start-style
Specifies the style of the element's border start. Use the border-right-style property instead.
-moz-border-start-width
Specifies the width of the element's border start. Use the border-right-width property instead.
-moz-border-top-colors
Sets the border colors for the top edge. You can specify as many color values as you want. All specified colors will appear as a 1px thick line.
Box properties:
Property Support Description
-moz-box-align
Specifies how child elements of the box are aligned, when the size of the box is larger than the total size of the children.
-moz-box-direction
Specifies the direction in which the children of a box are placed.
-moz-box-flex
Specifies how an element grows to fill the box that contains it, relative to its siblings.
-moz-box-ordinal-group
Sets the display order in which objects appear within a box.
-moz-box-orient
Specifies whether the children of a box element should be laid out horizontally or vertically.
-moz-box-pack
Specifies where child elements of the box are placed when the box is larger than the size of the children.
-moz-box-shadow
3.5
Specifies a comma-separated list of shadow effects to be applied to the box of the element.
-moz-box-sizing
Specifies how the width and the height of the element are calculated. It affects the height and width properties.
Column properties:
Property Support Description
-moz-column-count
Specifies the number of columns that the contents of the element should be flowed into.
-moz-column-gap
Specifies the amount of space between columns.
-moz-column-rule
3.5
Specifies the style, color and width of the column rule.
-moz-column-rule-color
3.5
Specifies the color of the column rule.
-moz-column-rule-style
3.5
Specifies the style of the column rule, which is placed in the middle of the column gap.
-moz-column-rule-width
3.5
Specifies the width of the column rule, which is placed in the middle of the column gap.
-moz-column-width
Specifies the suggested width of columns. The width of a column may be different from this value depending on its contents.
Margin properties:
Property Support Description
-moz-margin-end
Specifies the width of the left or the right margin, depends on the writing direction.
-moz-margin-start
Specifies the width of the left or the right margin, depends on the writing direction.
Outline properties:
Property Support Description
-moz-outline
3.6
Sets the outline of the element.
-moz-outline-color
3.6
Sets the color of the outline.
-moz-outline-offset
3.6
Sets the amount of space between the outline and the border or the edge of the element.
-moz-outline-radius
Sets the rounding of the outline corners.
-moz-outline-radius-bottomleft
Sets the rounding of the lower left outline corner.
-moz-outline-radius-bottomright
Sets the rounding of the lower right outline corner.
-moz-outline-radius-topleft
Sets the rounding of the upper left outline corner.
-moz-outline-radius-topright
Sets the rounding of the upper right outline corner.
-moz-outline-style
3.6
Sets the style of the left, right, top, and bottom borders of the object.
-moz-outline-width
3.6
Sets the width of the outline.
Padding properties:
Property Support Description
-moz-padding-end
Specifies the space between an element's left or right border and its contents, depending on the writing direction.
-moz-padding-start
Specifies the space between an element's left or right border and its contents, depending on the writing direction.
User interaction properties:
Property Support Description
-moz-user-focus
Specifies whether the element can have focus.
-moz-user-input
Specifies whether the element can have the input focus.
-moz-user-modify
Specifies which part of the contents of an element can be modified by the user.
-moz-user-select
Specifies whether the text of the element can be selected.
Additional properties:
Property Support Description
-moz-binding
Sets the URL of the XBL (Extensible Binding Language) file containing the binding.
-moz-force-broken-image-icon
Specifies whether the browser should display the "image failed to load" image instead of a real height.

Opera specific properties:

Aural properties:
Property Support Description
-op-phonemes
Specifies a phonetic pronunciation for the text contained by the corresponding element.
-op-voice-pitch
Specifies the average frequency of the speaking voice.
-op-voice-pitch-range
Specifies the variation from the average pitch of the voice.
-op-voice-rate
Specifies the number of spoken words per minute.
-op-voice-stress
Specifies the strength of emphasis to be applied.
-op-voice-volume
Sets the volume of a spoken element.
-xv-interpret-as
Specifies how to interpret the contents of the corresponding element.
-xv-phonemes
Specifies a phonetic pronunciation for the text contained by the corresponding element.
-xv-voice-balance
Sets the balance between left and right channels.
-xv-voice-duration
Specifies how long a given element is to be rendered.
-xv-voice-pitch
Specifies the average frequency of the speaking voice.
-xv-voice-pitch-range
Specifies the variation from the average pitch of the voice.
-xv-voice-rate
Specifies the number of spoken words per minute.
-xv-voice-stress
Specifies the strength of emphasis to be applied.
-xv-voice-volume
Sets the volume of a spoken element.
Background properties:
Property Support Description
-o-background-size
Sets the size of the background image.
Text properties:
Property Support Description
-o-text-overflow
9
Specifies how to handle the overflowed area of text.

Safari and Google Chrome specific properties:

Visual properties:
Property Support Description
-webkit-appearance
Specifies theme rendering mode for an element. Allows you to make an element look like a standard user interface element.
-webkit-transform
Specifies the two-dimensional linear transformation applied to an element. The origin of the transformation is specified by the -moz-transform-origin property.
-webkit-transform-origin
Specifies the origin of the two-dimensional linear transformations specified with the -moz-transform property.
Background properties:
Property Support Description
-webkit-background-clip
Sets which part of background is visible.
-webkit-background-composite
Sets the compositing style for an element's background image and color.
-webkit-background-origin
Specifies how the background-position property is determined, ergo it defines the reference point that the background-image is relative to.
-webkit-background-size
Sets the size of the background image.
Border properties:
Property Support Description
-webkit-border-bottom-left-radius
Sets the rounding of the lower left corner of the border.
-webkit-border-bottom-right-radius
Sets the rounding of the lower right corner of the border.
-webkit-border-horizontal-spacing
Specifies the amount of horizontal space between cells in a table.
-webkit-border-image
Specifies an image to use as the border of the element. The image is sliced into 9 pieces along the four diagonals specified with the length units.
-webkit-border-radius
Sets the rounding of the corners of the border.
-webkit-border-top-left-radius
Sets the rounding of the upper left corner of the border.
-webkit-border-top-right-radius
Sets the rounding of the upper right corner of the border.
-webkit-border-vertical-spacing
Specifies the amount of vertical space between cells in a table.
Box properties:
Property Support Description
-webkit-box-align
Specifies how child elements of the box are aligned, when the size of the box is larger than the total size of the children.
-webkit-box-direction
Specifies the direction in which the children of a box are placed.
-webkit-box-flex
Specifies how an element grows to fill the box that contains it, relative to its siblings.
-webkit-box-flex-group
Specifies the flexibility of an element group.
-webkit-box-lines
Specifies whether a flexible box should contain multiple lines of content, or not.
-webkit-box-ordinal-group
Sets the display order in which objects appear within a box.
-webkit-box-orient
Specifies whether the children of a box element should be laid out horizontally or vertically.
-webkit-box-pack
Specifies where child elements of the box are placed when the box is larger than the size of the children.
-webkit-box-shadow
Specifies a comma-separated list of shadow effects to be applied to the box of the element.
-webkit-box-sizing
Specifies how the width and the height of the element are calculated. It affects the height and width properties.
Column properties:
Property Support Description
-webkit-column-break-after
Specifies whether a column break should occur after an element.
-webkit-column-break-before
Specifies whether a column break should occur before an element.
-webkit-column-break-inside
Specifies whether a column break should occur inside an element.
-webkit-column-count
Specifies the number of columns that the given content of the element should be flowed into.
-webkit-column-gap
Specifies the amount of space between columns.
-webkit-column-rule
Specifies the style, color and width of the column rule.
-webkit-column-rule-color
Specifies the color of the column rule.
-webkit-column-rule-style
Specifies the style of the column rule, which is placed in the middle of the column gap.
-webkit-column-rule-width
Specifies the width of the column rule, which is placed in the middle of the column gap.
-webkit-column-width
Specifies the suggected width of columns. The width of a column may be different from this value depends on its contents.
Margin properties:
Property Support Description
-webkit-margin-bottom-collapse
Specifies whether the top and bottom margins can be shared between adjacent elements.
-webkit-margin-collapse
Specifies whether the top and bottom margins can be shared between adjacent elements.
-webkit-margin-start
Specifies the width of the left or the right margin, depends on the writing direction.
-webkit-margin-top-collapse
Specifies whether the top and bottom margins can be shared between adjacent elements.
Marquee properties:
Property Support Description
-webkit-marquee
Specifies up to five separate marquee properties, in a shorthand form.
-webkit-marquee-direction
Specifies the scrolling direction of the marquee.
-webkit-marquee-increment
Specifies the distance between each step of the scrolling marquee in pixels.
-webkit-marquee-repetition
Specifies the number of times the marquee should repeat.
-webkit-marquee-speed
Specifies the speed of the scrolling mechanism in a marquee element.
-webkit-marquee-style
Specifies the style of scrolling in a marquee element.
Padding properties:
Property Support Description
-webkit-padding-start
Specifies the space between an element's left or right border and its contents, depends on the writing direction.
Text properties:
Property Support Description
-webkit-line-break
Specifies the line breaking rules for Chinese, Japanese and Korean text.
-webkit-nbsp-mode
Specifies the behavior of non-breaking spaces within an element.
-webkit-rtl-ordering
Specifies the default rendering mode of right-to-left and mixed left-to-right content.
-webkit-text-fill-color
Specifies the fill color of the text.
-webkit-text-security
Specifies the type of shape used to hide the letters in a password input field.
-webkit-text-stroke
Sets the color and width of the text outline.
-webkit-text-stroke-color
Sets the color of text's outline.
-webkit-text-stroke-width
Sets the width of text's outline.
User Interaction properties:
Property Support Description
-webkit-user-drag
Specifies whether the element is draggable.
-webkit-user-modify
Specifies which part of the content of an element can be modified by the user.
-webkit-user-select
Specifies whether the text of the element can be selected.
User Contributed Comments

Post Content

Post Content