The following table shows CSS properties that are supported by most browsers today, along with their allowed values. Some of these properties are part of CSS3 specifications and are still experimental, so be sure to check with the Can I Use site for the latest information on browser support. (For help reading the Values column of this chart, see the article “A Quick Guide to the CSS Value Definition Syntax” at www.dummies.com/extras/beginninghtml5css3.)
Name | Values |
---|---|
animation | |
animation-delay | |
animation-direction | normal | alternate | reverse | alternate reverse |
animation-duration | |
animation-fill-mode | none | forwards | backwards | both |
animation-iteration-count | infinite | |
animation-name | none | |
animation-play-state | running | paused |
animation-timing-function | |
backface-visibility | visible | hidden |
background-attachment | scroll | fixed | inherit |
background-clip | border-box | padding-box | content-box | inherit |
background-color | |
background-image | |
background-origin | border-box | padding-box | content-box | inherit |
background-position | [ [ |
background-repeat | repeat | repeat-x | repeat-y | no-repeat | inherit |
background-size | |
background | [‘background-color’ || ‘background-image’ ||‘background-repeats’ ||‘background-attachment’ ||background-position] | inherit |
border-collapse | collapse | separate | inherit |
border-color | [ |
border-image | none | |
border-image-outset | ['sides' || 'horizontal' || 'vertical' || 'top' || 'bottom' || 'right' || 'left'] | inherit |
border-image-repeat | ['type' || 'horizontal' || 'vertical' || 'stretch' || 'repeat' || 'round'] | inherit |
border-image-source | none | |
border-image-slice | [ |
border-image-width | [ |
border-radius | [ |
border-spacing | |
border-style | |
border-top border-right border-bottom border-left | [ |
border-top-color border-right-color border-bottom-color border-left-color | |
border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius | [ |
border-top-style border-right-style border-bottom-style border-left-style | |
border-top-width border-right-width border-bottom-width border-left-width | |
border-width | |
border | [ |
bottom | |
box-shadow | none | [inset? && [ |
break-after | auto | always | avoid | left | right | page | column | avoid-page | avoid-column |
break-before | auto | always | avoid | left | right | page | column | avoid-page | avoid-column |
caption-side | top | bottom | inherit |
clear | none | left | right | both | inherit |
clip | |
color | |
columns | || |
column-count | |
column-fill | auto | balance |
column-gap | |
column-rule | || || |
column-rule-color | |
column-rule-style | [none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset] | inherit |
column-rule-width | |
column-span | none | all | inherit |
column-width | |
content | normal | none | [ |
counter-increment | [ |
counter-reset | [ |
cursor | [ [ |
direction | ltr | rtl | inherit |
display | inline | block | list-item | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit |
empty-cells | show | hide | inherit |
float | left | right | none | inherit |
font-family | [ [ |
font-size | |
font-style | normal | italic | oblique | inherit |
font-variant | normal | small-caps | inherit |
font-weight | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit |
font | [ [ ‘font-style’ || ‘font-variant’ || ‘font-weight’ ]?‘ font-size’ [ / ‘line-height’ ]? font-family ] | caption | icon | menu | message-box | small-caption | status-bar | inherit |
height | |
@keyframes | [ [ from | to | |
left | |
letter-spacing | normal | |
line-height | normal | |
list-style-image | |
list-style-position | inside | outside | inherit |
list-style-type | disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit |
list-style | [ ‘list-style-type’ || ‘list-style-position’ ||list-style-image ] | inherit |
margin-right margin-left | |
margin-top margin-bottom | |
margin | |
max-height | |
max-width | |
min-height | |
min-width | |
opacity | |
orphans | |
outline-color | |
outline-style | |
outline-width | |
outline | [ ‘outline-color’ || ‘outline-style’ || outline-width] | inherit |
overflow | visible | hidden | scroll | auto | inherit |
overflow-wrap | normal | break-word | inherit |
overflow-x | visible | hidden | scroll | auto | inherit |
overflow-y | visible | hidden | scroll | auto | inherit |
padding-top padding-right padding-bottom padding-left | |
padding | |
page-break-after | auto | always | avoid | left | right | inherit |
page-break-before | auto | always | avoid | left | right | inherit |
page-break-inside | avoid | auto | inherit |
perspective | none | |
perspective-origin | [ |
position | static | relative | absolute | fixed | inherit |
quotes | [ |
right | |
table-layout | auto | fixed | inherit |
text-align | left | right | center | justify | inherit |
text-decoration | none | [ underline || overline || line-through || blink ] | inherit |
text-indent | |
text-transform | capitalize | uppercase | lowercase | none |inherit |
top | |
transform | none | |
transform-origin | [ |
transform-style | flat | preserve-3d |
transition | [ none | |
transition-delay | |
transition-duration | |
transition-timing-function | |
transition-property | none | |
unicode-bidi | normal | embed | bidi-override | inherit |
vertical-align | baseline | sub | super | top | text-top | middle | bottom | text-bottom | |
visibility | visible | hidden | collapse | inherit |
white-space | normal | pre | nowrap | pre-wrap | pre-line |inherit |
widows | |
width | |
word-spacing | normal | |
z-index | auto | |