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

4 Responses to CSS3 Properties, Values & Browser Support

Lee Kowalkowski says:

February 19, 2010 at 8:08 am

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.

Estelle Weyl says:

February 19, 2010 at 1:20 pm

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.

Jason says:

February 23, 2010 at 7:53 am

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

jpvincent says:

February 24, 2010 at 1:00 am

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

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

4 Responses to CSS3 Properties, Values & Browser Support

Leave a Reply Cancel reply

About Estelle

Most recent posts

Accessibility

Browser Quirks & Hacks

References

Resources

Tutorials

@webdevtips’ Tips

Admin Stuff

Blog Categories