CSS3 browser support & properties syntax.

CSS3 ? It's the future of our CSS2.1.
Nowadays, more and more browsers already support some CSS3 elements.
Whereas they are not yet official, they are already quite common everywhere, especially on this web site :-).

Because not every browser is supporting the sames CSS3 properties, it's not easy to know which property is supported by everyone of them. That's the reason I made this : I want to list most of CSS3 properties in order to have a live-view of the support progress.

All you need is to open this web-page with different browsers and you will directly see if it is supported or not.

Each property is described as following :

If there are some CSS3 properties that are not listed and that you would see here, please, let met know.

For each property, I use all of those prefixes :

NOTE : historically, the Webkit rendering-engine is based upon the Khtml engine.
It's not a wonder if a -khtml- property works also in a browser that uses Webkit, like Chrome or Safari.

Table of content :

border-radius (Rounded corners)

Those are well-used on this whole web site. They allow you to have… Rounded corners !

Syntax

border-radius: <value>;

Same radius on the 4 corners :

border-radius: 15px;

Only one corner have a rounded corner :

border-top-left-radius: 15px;

Different radius on each corner :

border-radius: 10px 20px 30px 40px

Elliptical design for one corner :

border-top-left-radius: 10px / 20px;

Elliptical design for four corners :

border-radius: 10px 20px 30px 40px / 4px 8px 12px 16px;

Demo

Lorem
Ipsum
Dolor
Lorem
Ipsum
Dolor
 
Official With browser prefixes Reference image

View used CSS

text-shadow

Those made some shadow on text. It's very beautiful.

Syntax

text-shadow: <x-offset> <y-offset> <blur-radius> color;

Examples

One shadow :

text-shadow: 3px -4px 1px white;

Multiple shadows :

text-shadow: 1px -2px 1px yellow, -1px -4px 1px lime,  1px -6px 1px green, -1px -8px 1px aqua;

Demo

Lorem
Ipsum
Dolor
Lorem
Ipsum
Dolor
 
Official With browser prefixes Reference image

View used CSS

box-shadow

It makes one or more shadows on a box (a whole HTML block).

Syntax

box-shadow: <x-offset> <y-offset> <blur-radius> color;

Examples

One shadow :

box-shadow: 10px 5px 8px white;

Multiple shadows :

box-shadow: 0px 7px 8px yellow, 0px -7px 8px red,  7px 0px 8px lime, -7px 0px 8px blue;

Demo

Lorem
Ipsum
Dolor
Lorem
Ipsum
Dolor
 
Official With browser prefixes Reference image

View used CSS

transition

This bring an important possibility to CSS : time. With this, you can, for example, gradually change background color from red to blue, or change sizes of boxes smoothly on a hover. It's a very powerful effect.
You can use it one many CSS properties : background-color, color, text-shadow… But also on width and height, which is very interesting.

Syntax

transition: <affected-property> <duration> <delay (before transition)> <transition-acceleration>;

Examples

Transition on background color :

transition: background-color 2s 0s linear;

Accelerations types are : linear, ease, ease-in, ease-out and ease-in-out ; (there is also an other one : cubic-bezier(x, x, x, x), which allows you to create your own function).

Multiple transitions are also possible :

transition: background-color 2s 0s linear, color 1s 1s ease-in;
Because it is a *transition* effect *between two values*, one of them needs to be triggered be some things like a ":hover" or ":focus" effect.

Demo

Lorem
Ipsum
Dolor
Lorem
Ipsum
Dolor
 (no image, I need to make an animated gif…)
Official With browser prefixes Reference image

View used CSS

Opacity

Opacity is not to be confused with transparent color (rgba).

Opacity rules a box and his content transparency. If your box is 50% opaque, the text and the images inside the box will be too.

Syntax

opacity: <value>;
Where "value" is a value between 0 and 1.

Example

a 45% opacity :

opacity: .45;

Demo

ponyta, pokemon #77Lorem
Ipsum
Dolor
ponyta, pokemon #77Lorem
Ipsum
Dolor
 
Official With browser prefixes Reference image

View used CSS

Red Green Blue Alpha

This adds an alpha-layer on your colors (border, shadow, background, text…), only the color and not the content will appearing to be transparent.

Syntax

color: rgba([0-255], [0-255], [0-255], [0-1]);

Example

a div#box with a semi-transparent blue background :

div#box { background-color: rgba(0, 0, 255, 0.5)

Demo

ponyta, pokemon #77Lorem
Ipsum
Dolor
ponyta, pokemon #77Lorem
Ipsum
Dolor
 
Official With browser prefixes Reference image

View used CSS

border-image

Another beautiful property, witch makes a border from images.

For this, the image needs to have a particular format. For some distance "a" the image needs to be "3 × a" wide. The first "a" will be the background of the first corner, the second will be the background of a whole side and the last will be the background of the second corner. Here, I made an image to explain this. The only image you need to create, is what you see in the middle (here is the one I used below). You can see the "a" distance.

Syntax

border-image: url(<image>) <split-distance> (round|stretch) (round|stretch);

Of course, "split-distance" here, is what I called "a" before. By testing and changing the "a" distance in CSS with the same image, you'll be fixed to know how it works.

Round makes the border get the motif repeat, and stretch makes it… Stretch !

Example

border-image: url(image.png)  round round;

Demo

Lorem
Ipsum
Dolor
Lorem
Ipsum
Dolor
 
Official With browser prefixes Reference image

View used CSS

background-images

CSS3 now supports more than one image as background of one only box.

Syntax

The syntax is very easy : just separate the backgrounds by commas.

background: url(image) <position> <repeat>, url(image2) <position> <repeat>;

Example

background: url(left_bg.png) top left repeat-y, url(center_bg.png) center repeat-y, url(right_bg.png) top right repeat-y;
Lorem
Ipsum
Dolor
Lorem
Ipsum
Dolor
 
Official With browser prefixes Reference image

View used CSS

transform 2D

This great property, is one of the most interesting property.
It transforms the position and the shape of HTML elements. You can rotate, scale or even translate elements (combine it with a :hover effect and some transition and you don't need flash or JS anymore !

Each kind of transformation can be used separately, but I give them all here.

Syntax

transform: scale([0-1]) rotate([0-360]deg) translate(XXpx, XXpx) skew([0-360]deg, [0-360]deg);
transform-origin: X% X%;

Example

a div#box with a becoming a parallelogram and turned 45degrees to the left, it will be 75% his previous own size :

div#box { transform: scale(.5) rotate(45deg) skew(30deg 0deg);

Demo

And what's so amazing, is that the text still stay text (witch is not the case of PHP images with text in it), so you can still select the text.

ponyta, pokemon #77Lorem
Ipsum
Dolor
ponyta, pokemon #77Lorem
Ipsum
Dolor
 
Official With browser prefixes Reference image

View used CSS

Border-colors

Border color allows you to choose one color. Now, border colors allows you to choose many color, each of then will be one pixel wide.
So it are simple "multiple borders" of one pixel each.

Syntax

border: 4px solid black; border-colors: color1 color2 color3 color4;

You see, first we need to declare border with a specific width, then each pixel of the width is colored in different colors.

Example

border: 7px solid black; border-colors: purple navy blue lime yellow #f82 red;

Demo

Lorem
Ipsum
Dolor
Lorem
Ipsum
Dolor
 
Official With browser prefixes Reference image

View used CSS

Multiple columns

This CSS3 element gives multiple colums to a paragraphe. The effect is the same as in a newspaper. The text lines are shorter and more readeable.

Syntax

column-count: 3;
column-rule: 1px solid #bbb;
column-gap: 1em;

Demo

Iis igitur est difficilius satis facere, qui se Latina scripta dicunt contemnere. in quibus hoc primum est in quo admirer, cur in gravissimis rebus non delectet eos sermo patrius, cum idem fabellas Latinas ad verbum e Graecis expressas non inviti legant. quis enim tam inimicus paene nomini Romano est , qui Ennii Medeam aut Antiopam Pacuvii spernat aut reiciat, quod se isdem Euripidis fabulis delectari dicat, Latinas litteras oderit? Synephebos ego, inquit, potius Caecilii aut Andriam Terentii quam utramque Menandri legam?
Iis igitur est difficilius satis facere, qui se Latina scripta dicunt contemnere. in quibus hoc primum est in quo admirer, cur in gravissimis rebus non delectet eos sermo patrius, cum idem fabellas Latinas ad verbum e Graecis expressas non inviti legant. quis enim tam inimicus paene nomini Romano est , qui Ennii Medeam aut Antiopam Pacuvii spernat aut reiciat, quod se isdem Euripidis fabulis delectari dicat, Latinas litteras oderit? Synephebos ego, inquit, potius Caecilii aut Andriam Terentii quam utramque Menandri legam?
 
Official With browser prefixes Reference image

View used CSS

nth selector

With the nth-of-type selector, you can aim a child element specificaly. For example, if you have a div with 10 paragraphs, you can aim the seventh or the fifth with one line of CSS.

Syntax

parent > child:nth-of-type(n) {
   css
}

Example

ul#menu li:nth-of-type(3) {
   background-color: red;
}

This will set a red background to the third list element of your ul#menu

Instead of a number, you can also give some keywords odd/even and even a mathematical function like 3n (will aim on child element out of 3) or 2n+1 (same effect as "odd").

Demo

  • one
  • two
  • three
  • four
  • five
 
Official Reference image

View used CSS

Word-wrap

When you have a small column with a very long word inside, it can happen that the column is disformed, what can destroy your whole page desing.

Thanks to this word-wrap proprety, you can decide how those long word will appear : they can be normal or broken on to lines, to avoid they overflows out of the box.

Syntax

word-wrap: (normal|break-word)

Example

word-wrap: break-word;

This will make a long word will break on two (or more) lines if the shoud normally get out of it.

Demo

Graecis express asnoninvitilegantquisenimtamini nomini Romano est?

Graecis express asnoninvitilegantquisenimtamini nomini Romano est?

Graecis express asnoninvitilegantquisenimtamini nomini Romano est?

Graecis express asnoninvitilegantquisenimtamini nomini Romano est?

 
Official With browser prefixes Reference image

View used CSS

Linear Gradient

Those are computed backgrounds where, for example, the color fades from one to another. In the futur, they could replace some background images

Syntax

linear-gradient(<top|left|bottom|right|(angle)>, color1 begin-distance1, color2 begin-distance2, …)

The "begin-distance" is the distance for the gradient to begin. Before the full color is used, after, the gradient starts.

Example

background: linear-gradient(top, red 0%, rgba(0,255,255, .6) 100%);
background: linear-gradient(left, red 0%, rgba(0,255,255, .6) 100%);
background: linear-gradient(45deg, red 0%, rgba(0,255,255, .6) 100%);
background: linear-gradient(top, navy 7%, blue 21%, green 35%, yellow 49%, orange 63%, red 77%, purple 93%);

Demo

 
 
 
Official With browser prefixes Reference image

View used CSS

Animation

Another amazing CSS3 property, besides transtion, is animation.
You can make animations, that stays in time. One animation can even be repeated once, twice or many time. Even an infinite times.

Syntax

animation: animName 3s 5 ease-in-out alternate;
@keyframes animName {
	  0% { color: 1px 1px 2px #00f }
	 20% { color: 1px 1px 2px #7f7 }
	 40% { color: 1px 1px 2px #ffa }
	 60% { color: 1px 1px 2px #faa }
	 80% { color: 1px 1px 2px #fdf }
	100% { color: 1px 1px 2px #adf }
}

Where :

Demo

 
 
 
Official With browser prefixes Reference image

View used CSS

Created in May 2010
Last update : 01-12-2013.