CSS3 Pills Lesson 2 : Border Radius

Today we’ll talk about border radius property on css3.First of all we’ll look to the browsers support situation to have a clear picture and how we must move when design with border radius.In the second part we’ll see property in action with some code snippets.

Browsers Support

In order to have a clear idea of which browsers support the property border-radius we’ll see what version support begins:

Chrome

From version 3.0 onward with the prefix -webkit-, but from march 2010 it doesn’t need anymore, so you can use simply border-radius

Mozilla

From version 1.0 onward with the prefix -moz-, but from the release 4 in april 2010 it doesn’t need anymore, so you can use simply border-radius

Internet Explorer

Only from IE9 beta was introduced the support for the border-radius property without prefix.If you need to run border-radius for older versions you need plug-ins.

Opera

Support for the border-radius property without prefix start from version 10.5 onward.

Safari

Safari support the border-radius property without prefix -webkit- start from the release 3.0.Any older version need the prefix.

In Conclusion

We can therefore claim that actually all modern browsers, IE9 included, support the border-radius property natively without any kind of prefix

Border Radius in action

As usual assume to have a div named “container”.

Collective Border radius

A simple approach is to give the same border radius to all corners of the div “containter” :

#container{border-radius: 5px; }
*/ Works with all modern browser -For Microsoft browsers run only from IE9 Beta */

Individual Border radius

Another approach is to assign the value of radius to each corner, specially if you need corners with different radius :

#container{
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px
 }
*/ Works with all modern browser -For Microsoft browsers run only from IE9 Beta */

Shorthand Version

A quicker way to assign different values to each corner is the shorthand code property :

#container{
border-radius: 5px 3px 4px 2px;
 }
*/ Works with all modern browser -For Microsoft browsers run only from IE9 Beta */

Variable Radius

Suppose to need a variable radius for a corner, css3 allow to assign two values to set the curve :

#container{
border-top-left-radius: 50px 100px;
 }
*/ Works with all modern browser -For Microsoft browsers run only from IE9 Beta */