CSS3 Properties, Values & Browser Support

CSS Properties Index

Below is every most CSS3 Properties, all the possible values for that property, and the support for each property value from grade-A browsers

This grid does not include animation, tranforms, grids, columns, layouts or templates. I have a separate post for CSS3 Background Properties and CSS3 border properties. Those are all coming soon. Sorry for the slow download, but this table is over 8000 lines worth of HTML. I am breaking this out into smaller, related sections. I’ll be posting those at my new site. And, yes, I know this table breaks the layout of the page. This whole blog theme is ugly, but some of the content hopefully makes this eyesore worth it ;) The new site should be ready soon: and way prettier!

Property CSS 2.1 Default Value ie6 ie7 ie7comp ie8 FF3 Saf OP Notes
Property CSS 2.1 Default Value ie6 ie7 ie7comp ie8 FF3 Saf OP  
azimuth Audio center aural  
angle (270deg)    
left-side | far-left | left | center-left | center | center-right | right | far-right | right-side
behind | leftwards | rightwards
inherit    
background CSS2.1/CSS3
body {
    background-color: transparent;
    background-position: 0% 0%;
    background-size: auto auto;
    background-repeat: repeat repeat;
    background-clip: border-box;
    background-origin: padding-box;
    background-attachment: scroll;
    background-image: none; }
                        
see individual background properties below
background CSS3                
background-attachment CSS2.1 Δ Δ Δ  
scroll default Δ Δ Δ  
fixed   Χ Χ Χ  
inherit    
local not in spec   Δ Δ Δ Χ Χ Χ Χ  
background-break not in spec NO LONGER IN CSS3 Spec Χ Χ Χ Χ        
background-clip CSS3           -moz- -webkit   Webkit uses both -webkit-border and -webkit-border-box. syntax may change.
border-box default           border    
padding-box             padding    
content-box not in spec           content    
background-color CSS2.1/CSS3    
rgb()     Δ Δ  
#FFFFFF      
colorName     Δ  
transparent default   Δ  
inherit      
rgba() CSS3   filter Χ  
background-image CSS2.1 not inherited  
inherit     Δ Δ Δ  
none default    
url      
url, url CSS3   Χ Χ Χ Χ Χ Χ  
background-origin CSS3           -moz- -webkit   mozilla and webkit ahve support, but use differnt value terms
border-box             border border  
padding-box default           padding padding  
content-box             content content  
background-position CSS2.1 0% 0%  
left | top | right | bottom | center      
inherit      
px      
%      
background-position-x CSS3   Χ Χ  
backgroun-position-y CSS3   Χ Χ  
background-repeat CSS2.1    
inherit      
repeat default    
no-repeat      
repeat-x / repeat-y      
background-size             -moz- 3.6 -webkit
3
-o-9.5  
auto – actual size of image default                  
cover – scale to cover entire box                    
contain – scale to fit inside box                    
widthLength heightLength                    
block-progression CSS3 inherited                
tb default                  
lr                    
rl                    

border

border-bottom | border-left | border-right | border-top

CSS2.1 medium none (current color) Δ Δ Δ border-width || border-style || border-color
border-color

border-bottom-color | border-left-color | border-right-color | border-top-color

CSS2.1 (current color)  
rgb()     Δ Δ Δ  
#CCCCCC      
colorName     Δ  
transparent     Χ Δ Δ  
inherit      
rgba()     Δ Δ  
border-style

border-bottom-style
border-left-style
border-right-style |
border-top-style

CSS2.1    
dashed      
dotted      
double      
groove     Δ  
hidden     Χ Χ Χ  
inset     Δ  
none default    
outset     Δ Δ Δ Δ  
ridge     Δ  
solid      

border-width

border-bottom-width

border-left-width
border-right-width
border-top-width

CSS2.1 medium Δ Δ Δ  
thin      
medium      
thick      
length (3px)      
!!!!!border-break CSS3                  
border-width                    
border-style                    
color                    
close                    
border-collapse CSS2.1   Δ Δ Δ 'table' and 'inline-table' elements
collapse     Δ Δ Δ  
separate default    
inherit      
border-image CSS3 shorthand         -moz-      
image             3.5      
border-image-outset CSS3           -moz-      
length {1,4}                    
border-image-repeat CSS3           -moz-      
stretch default                  
repeat                    
round                    
space                    
border-image-slice CSS3           -moz-      
length{1,4} default=100%                  
fill                    
border-image-source CSS3           -moz-      
url()                    
none default                  
border-image-width CSS3           -moz-      
length ({1,4}                    
auto                    
border-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-top-left-radius
CSS3 Note: Firefox sytax is wrong:
-moz-border-radius-topleft,
-moz-border-radius-topright,
-moz-border-radius-bottomright,
-moz-border-radius-bottomleft
        -moz- -webkit- -o- values before slash = horizontal radius, values after the slash = vertical radius.
length                    
box-shadow CSS3 currently removed from spec. Will likely come back         -moz- -webkit-    
inset lngth lngth lngth color                    
lngth lngth lngth color                    
none                    
(mulitple shadows)             3.5 4.0    
border-spacing CSS2.1 0 Χ Χ Χ 'table' and 'inline-table' elements. Used with {border-collapse: separate;}
length     Χ Χ Χ
length length     Χ Χ Χ
inherit     Χ Χ Χ
bottom CSS2.1   Δ  
length     Δ  
percent     Δ  
auto     Δ  
box-decoration-break CSS3 not inherited               handling of border when a box is broken by a page, col break, etc.
clone                  
slice default                
caption-side CSS2.1   Χ Χ Χ  
top default    
bottom     Χ Χ Χ  
left / right not in spec   Χ Χ Χ Δ Χ Χ  
clear CSS2.1    
both      
left      
right      
none default    
clip CSS2.1   Χ Χ Χ on absolutely positioned elements
rect(T, R, B, L)     Χ Χ Χ  
auto default    
inherit     Χ Χ Χ  
color CSS2.1 depends on element and browser  
rgb()     Δ Δ  
#CCCCCC      
colorName      
transparent     Χ Χ Χ Χ Χ  
inherit      
rgba()     Χ Χ Δ Δ Δ Δ Χ  
content
:before & :after
CSS2.1   Χ Χ Χ  
none     Χ Χ Χ Χ  
normal default   Χ Χ Χ Χ Χ  
url()     Χ Χ Χ  
string     Χ Χ Χ  
open-quote / close-quote     Χ Χ Χ Χ Δ  
no-open-quote / no-close-quote     Χ Χ Χ Χ  
attr(x)     Χ Χ Χ  
counter     Χ Χ Χ  
inherit     Χ Χ Χ  
counter-increment CSS2.1   Χ Χ Χ  
counterName int     Χ Χ Χ  
none default   Χ Χ Χ  
inherit     Χ Χ Χ  
counter-reset CSS2.1   Χ Χ Χ  
counterName int     Χ Χ Χ  
none default   Χ Χ Χ  
inherit     Χ Χ Χ  

cue

cue-after

cue-before

CSS2.1   aural  
url(x.wav)      
none default    
inherit      
cursor CSS2.1    
url(x.cur)     Χ Χ  
auto default    
crosshair      
default      
pointer      
move     Δ  
e-resize      
ne-resize      
nw-resize      
n-resize      
se-resize      
sw-resize      
s-resize      
w-resize      
text      
wait      
progress      
help      
inherit      
direction CSS2.1/CSS3 inherited              
ltr default    
rtl                    
inherit      
display CSS2.1    
inline      
block      
list-item      
run-in     Δ Δ Δ      
inline-block     Δ Δ Δ  
table     Δ Δ Δ  
inline-table             3.0      
table-row-group                    
table-header-group                    
table-footer-group                    
table-row     Δ Δ Δ    
table-column-group     Δ Δ Δ    
table-row     Δ Δ Δ    
table-column     Δ Δ Δ    
table-cell     Δ Δ Δ    
table-caption     Δ Δ Δ    
none      
inherit      
ruby CSS3                  
ruby-base CSS3                  
ruby-text CSS3                  
ruby-base-group CSS3                  
ruby-text-group CSS3                  
compact CSS2.0/CSS3                  
elevation CSS2.1 level aural
angle (270deg)    
below | level | above | higher | lower    
inherit    
empty-cells CSS2.1 show Χ Χ Χ sets whether or not to show empty cells in a table when "separated
show     Χ Χ Χ Borders are drawn around empty cells
hide Default   Χ Χ Χ No borders are drawn around empty cells
inherit     Χ Χ Χ  
float CSS2.1 none  
left      
right      
none      
inherit      
font CSS2.1 depends on element and browser              
fStyle fVariant fWeight fSize/lineHeight fFamily                    
caption              
icon            
menu            
message-box            
small-caption            
status-bar            
inherit            
font-effect CSS3 no longer in spec                
font-emphasize CSS3 no longer in spec                
font-family CSS2.1 depends on element and browser              
font-1, font-2, generic                    
singleFontFamily                    
inherit                    
font-size CSS2.1 medium  
xx-small | x-small | small | medium | large | x-large | xx-large      
larger | smaller      
length (12px)      
percent (108%)      
inherit      
font-size-adjust CSS2/CSS3 sandbox              
none default            
inherit                  
length                  
font-stretch CSS3 sandbox                
normal default    
wider                    
narrower                    
ultra-condensed / ultra-expanded                    
extra-condensed/ extra-expanded                    
condensed / expanded                    
semi-condensed / semi-expanded                    
inherit                    
font-style CSS2.1 normal  
normal      
italic     Δ Δ Δ Δ Δ Δ Δ  
oblique     Δ Δ Δ Δ Δ Δ Δ  
inherit      
font-variant CSS2.1 normal  
normal      
small-caps      
inherit      
font-weight CSS2.1 normal  
normal      
bold      
bolder                
lighter                
100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900   couldn’t fully test because i don’t have "light" fonts            
inherit      
hanging-punctuation CSS3                  
none                    
start | end                    
end-edge                    
height CSS2.1 auto Δ      
length / percent     Δ      
auto     Δ      
inherit     Δ      
left CSS2.1 auto  
length / percent      
auto      
inherit      
letter-spacing CSS2.1 inherited  
length (3px)      
normal default   Δ  
inherit      
line-height CSS2.1 normal  
normal default    
number (2)      
length (3px)      
percent      
inherit      
line-stacking CSS3 shorthand                
strategy ruby shift (see below)                    
line-stacking-strategy CSS3                  
inline-line-height default                  
block-line-height                    
max-height                    
grid-height                    
line-stacking-ruby CSS3 inherited                
exclude-ruby default                  
include-ruby                    
line-stacking-shift CSS3 inherited                
consider-shifts default                  
disregard-shifts                    
list-style CSS2.1 depending on individual properties  
type position image      
inherit      
list-style-image CSS2.1 inherited              
url()                    
none default                  
inherit                    
list-style-position CSS2.1 outside              
inside                    
outside                    
inherit                    
list-style-type CSS2.1 disc sandbox  
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      
asterisks CSS3                  
box CSS3                  
check CSS3                  
diamond CSS3                  
footnotes CSS3                  
hyphen CSS3                  
cjk-ideographic CSS3                  
hiragana CSS3                  
katakana CSS3                  
hiragana-iroha CSS3                  
katakana-iroha CSS3                  

margin

margin-bottom
margin-left
margin-right
margin-top

CSS2.1 depends on element and browser Δ Δ Δ  
length (3px)     Δ Δ Δ  
inherit     Δ Δ Δ  
marquee-direction CSS3                  
forward                    
reverse                    
marquee-play-count CSS3                  
infinite                    
number                    
marquee-speed CSS3                  
slow                    
normal                    
fast                    
marquee-style CSS3                  
scroll                    
slide                    
alternate                    
max-height CSS2.1 none Χ      
length / percent     Χ      
none     Χ      
inherit     Χ      
max-width CSS2.1 none Χ      
length / percent     Χ      
none     Χ      
inherit     Χ      
min-height CSS2.1 0 Χ      
length / percent     Χ      
inherit     Χ      
min-width CSS2.1 0 Χ      
length / percent     Χ      
inherit     Χ      
opacity     IE has proprietary filter to simulate effect: filter: alpha(opacity=xx)     10  
inherit         10  
(number)         10  
orphans CSS2.1 2 Χ Χ Χ Χ Χ  
integer     Χ Χ Χ Χ Χ  
inherit     Χ Χ Χ Χ Χ  
outline CSS2.1 depending on individual properties Χ Χ Χ see individual properties below
color style width     Χ Χ Χ  
none     Χ Χ Χ  
inherit     Χ Χ Χ  
outline-color CSS2.1 invert Χ Χ Χ  
rgb / #fff / colorName     Χ Χ Χ          
invert     Χ Χ Χ          
inherit     Χ Χ Χ          
outline-offset CSS3                  
inherit                    
(length)                    
outline-style CSS2.1 none Χ Χ Χ  
dashed     Χ Χ Χ  
dotted     Χ Χ Χ  
double     Χ Χ Χ  
groove     Χ Χ Χ  
hidden     Χ Χ Χ  
inset     Χ Χ Χ  
none     Χ Χ Χ  
outset     Χ Χ Χ  
ridge     Χ Χ Χ  
solid     Χ Χ Χ  
inherit     Χ Χ Χ  
outline-width CSS2.1 medium Χ Χ Χ  
thin     Χ Χ Χ  
medium     Χ Χ Χ  
thick     Χ Χ Χ  
length (3px)     Χ Χ Χ  
inherit     Χ Χ Χ  
overflow CSS2.1 depending on individual properties  
visible     Δ  
hidden      
scroll      
auto      
inherit      
no-display CSS3 sandbox                
no-content CSS3 sandbox                
overflow-style CSS3                  
auto                    
marquee-line                    
marquee-block CSS3                  
overflow-x CSS3   -ms- -ms- -ms-          
overflow-y CSS3   -ms- -ms- -ms-          

padding

padding-bottom
padding-left
padding-right
padding-top

CSS2.1 depends on element and browser Δ Δ Δ  
length (3px)     Δ Δ Δ  
inherit      
page 2.0 auto                
identifier                    
auto                    
page-break-after CSS2.1 auto not inherited
always     force a page break after the element
auto                   page break where it would normally break
left             force page breaks so that next page is a left page
right           force page breaks so that next page is a right page
avoid                   Avoid a page break after the element
page-break-before CSS2.1 auto not inherited
always     force a page break after the element
auto                   page break where it would normally break
left             force page breaks so that next page is a left page
right           force page breaks so that next page is a right page
avoid                   Avoid a page break after the element
page-break-inside CSS2.1 auto               not inherited
avoid                   Avoid a page break inside the element
auto                   page break where it would normally break
pause CSS2.1 implementation dependent aural Shorthand for pause-before pause after
time (in ms)      
%      
pause-after CSS2.1 implementation dependent  
time (in ms)     time in milliseconds
%     pause the % of time it would take to say a word (>100% ok)
pause-before CSS2.1 implementation dependent  
time (in ms)      
%      
pitch CSS2.1 medium  
Hz / kHz      
x-low | low | medium | high | x-high      
pitch-range CSS2.1 50  
0 or more      
     
     
play-during CSS2.1 auto  
url(x.wav)      
url(x.wav) mix      
url(x.wav) repeat      
auto      
none      
position CSS2.1 static  
absolute      
fixed     Χ Δ Δ Δ  
relative     Δ Δ Δ  
static      
punctuation-trim CSS3 inherited                
none default                  
start | end                
adjacent              
quotes CSS2.1 implementation dependent Χ Χ Χ 3.5    
string (‘”’ ‘“’ "’" "‘")     Χ Χ Χ          
none     Χ Χ Χ          
inherit     Χ Χ Χ          
richness CSS2.1 50 aural
number (50)    
inherit    
right CSS2.1 auto Δ  
length / percent     Δ  
auto     Δ  
inherit     Δ  
size 2.0 auto                
length (8.5in 11in)                    
portrait / landscape                    
auto                    
speak CSS2.1 normal aural
normal      
none      
spell-out      
inherit      
speak-header CSS2.1 once  
once      
always      
inherit      
speak-numeral CSS2.1 continuous  
digits      
continuous      
inherit      
speak-punctuation CSS2.1 none  
code      
none      
inherit      
speech-rate CSS2.1 medium  
number      
x-slow | slow | medium | fast | x-fast | faster | slower      
inherit      
stress CSS2.1 50  
number      
inherit      
table-layout CSS2.1 auto √7  
auto      
fixed      
inherit      
text-align CSS2.1 start  
left      
right      
center      
justify      
inherit      
start | end CSS3           3.6      
(char)                    
text-align-last CSS3   -ms- -ms- -ms-          
start | end                    
left | right | center                    
justify                    
text-decoration CSS2.1 none  
none      
underline      
overline      
line-through      
blink      
inherit      
text-emphasis CSS3 inherited                
                     
none default    
accent | dot | circle | disc                    
before | after                    
text-height CSS3                  
auto                    
text-size                    
font-size                    
max-size                    
text-indent CSS2.1 inherited  
length / percent default = 0    
inherit      
hanging CSS3                  
text-justify CSS3   -ms- -ms- -ms- -ms-        
auto                    
inter-word                    
inter-ideograph | inter-cluster                    
distribute                    
kashida | tibetan                    
text-outline CSS3 inherited                
none default                  
color                    
length                    
text-overflow CSS3.X not in the spec yet -ms- -ms- -ms- -ms-        
string | clip | ellipses                    
text-shadow 2.0/3 inherited Χ Χ Χ Χ Not in the 2.1 spec
color leftOffset topOffset blurRadius 2.0/3   Χ Χ Χ Χ √- text-shadow sandbox
multiple shadows CSS3   Χ Χ Χ Χ √- 10  
none default                  
text-transform CSS2.1 none text-transform standbox
capitalize      
uppercase      
lowercase      
none      
inherit      
text-wrap CSS3                  
normal      
unrestricted                    
none                    
suppress                    
top CSS2.1 auto  
length / percent      
auto      
inherit      
unicode-bidi CSS2.1 normal        
normal      
embed            
bidi-override            
inherit                    
vertical-align CSS2.1/CSS3 baseline inline-level and table-cell elements only
baseline     Χ √; Χ Δ  
sub     Δ Δ Δ  
super     Δ Δ Δ  
top      
text-top      
middle     Δ Δ  
bottom      
text-bottom     Δ Δ Δ Δ  
percent     Δ Δ Δ  
length (3px)     Δ Δ Δ  
inherit      
auto                    
central                    
use-script CSS3                  
visibility CSS2.1 visible  
visible      
hidden     Δ Δ Δ  
collapse     Χ Χ Χ Δ Δ collapse in tables, hidden elsewhere
inherit      
voice-family CSS2.1 implementation dependent aural
specificVoice, genericVoice    
inherit    
volume CSS2.1 medium
number / percent    
silent | x-soft | soft | medium | loud | x-loud    
inherit    
white-space CSS2.1 normal  
normal test   Δ Δ Δ  
pre test    
nowrap      
pre-wrap     Χ Χ Χ  
pre-line     Χ Χ Χ Χ  
inherit      
white-space-collapse CSS3                  
preserve                    
collapse                    
preserve-breaks                    
discard                    
widows CSS2.1 2 Χ Χ Χ Χ Χ  
integer     Χ Χ Χ Χ Χ  
inherit     Χ Χ Χ Χ Χ  
width CSS2.1 auto Δ Δ Δ  
length / percent     Δ Δ Δ  
auto     Δ Δ Δ  
inherit     Δ Δ Δ  
word-break CSS3   -ms- -ms- -ms-          
normal      
keep-all                    
loose                    
break-strict                    
break-all                    
word-spacing CSS2.1 inherited  
length (3px)     Δ Δ Δ  
normal default    
word-wrap CSS3   -ms- -ms- -ms-   3.5      
normal default    
break-word                    
writing-mode   Shorthand for direction and block progression               IE8 also supports bottom to top modes
lr-tb                  
rl-tb                  
tb-rl                  
tb-lr                  
z-index CSS2.1 auto Δ Δ Δ applies to positioned elements
integer (3)     Δ Δ Δ  
auto      

 

Notes

  • Level of support for property is based on CSS2.1. So, if a browser supports all of CSS2.1 but not CSS3, they will get be listed as supporting the property, unless it’s a purely CSS3 property. If there is a browser specific prefix to make the CSS3 work, it passes as "almost good."
  • Browsers include:
    (if it passed originally in older browser, i did not retest)

    • IE6
    • IE7
    • IE7 compatibility mode
    • IE8
    • Firefox 3, 3.5, 3.6
    • Safari 3.2 and 4 beta
    • Opera 9.64 and 10
  • There are a lot of hidden title attributes in this page. When you hover over the deltas and underlined table cells, in standards compliant browsers, informaiton on how the browsers fails to comply with standards should be displayed.
  • This is still a work in progress, but it’s pretty far along, so I am posting. It will be updated soon and often until done… then I’ll remove this bullet point.

Key

Haven’t run tests yet Fails Some Support Almost Compliant Compliant Aural (will not support) Print
             
will test soon   may add links to tests may add link to tests   will unlikely be supporting will add support soon
This entry was posted in Browsers, CSS (including hacks), Web Development. Bookmark the permalink.

4 Responses to CSS3 Properties, Values & Browser Support

  1. That’s exceptional! Would you like to offer a downloadable version?

    I’m curious to know why IE has deltas for display:inline-block, but these cells have no titles yet.

  2. Estelle Weyl says:

    If i recall correctly, it is because they don’t support inline-block on elements that are natively block — it only works on natively inline elements. THere is a hack to enable it by setting hasLayout.

    I will be making a pdf of the whole thing when it’s done, but i still have too many holes, and a lot of CSS modules to add.

  3. Jason says:

    thanks for the great list.. however it’s not rendering in ie7 :-p

  4. jpvincent says:

    that’s an impressive job
    you’re replacing quirksmode in my bookmarks :)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>