CSS3 Border Radius

By | January 5, 2011

Border Radius which is the property that creates rounded corners is (as are a lot of the other properties of CSS3 at the moment) supported differently across the browsers. This is because the property is not standard (yet) but was considered too important not to implement.
So Firefox and Safari “jumped the gun” a little bit to give us this snazzy effect.
Recently IE has (eventually) decided that they may as well follow the other browser vendors but of course they use a different syntax to the others. Having said that to be fair to Microsoft this new way of writing the syntax is probably going to be the standard.
So let’s have a look at the syntax.

For Firefox

-moz-border-radius: 10px;

For Safari/Chrome

border-radius: 10px;

For IE9

border-radius: 10px;

This give a nice rounded corner which you can see in the image below.

CSS3 Border Radius 1

Now you don’t have to round all the corners the same you can round some corners and not others but it gets more complicated as each browser supports this in a different way.

For Firefox

-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 20px;

For Safari/Chrome

border-top-left-radius: 0px;
border-top-right-radius: 20px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 20px;

For IE9

border-top-left-radius: 0px;
border-top-right-radius: 20px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 20px;

As you can see even if you disregard the browser specific part at the beginning of the rules firefox has a slightly different way of declaring the rules.

The end result is still the same though.

CSS3 Border Radius 2

Thats all for now.

One thought on “CSS3 Border Radius

Leave a Reply

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