This tutorial is on creating rounded corners effect with the aid of CSS3. This effect is achieved using “border-radius” property and really saves our time which was wasted in creating round-edged border images in Photoshop and then being used in web designs. For now, this effect is only visible in latest versions of Mozilla Firefox, Chrome, Safari and Opera and not in IE yet. But, Microsoft has confirmed the CSS3 support in Internet Explorer 9. And, have a look at the update for CSS3 Border Radius property in IE9 Test Drive page.
CSS3 “border-radius” examples
Example 1
This box was created using the following code.
<div style=”background-color:#F1F1F1; border:3px solid #DDDDDD;-webkit-border-radius: 5px; -moz-border-radius: 5px;border-radius: 5px;padding: 10px;”></div>
Example 2
-moz-border-radius: 10px;
border-radius: 10px;
Example 3
-moz-border-radius: 20px;
border-radius: 20px;
Example 4
-moz-border-radius: 24px 0;
border-radius: 24px 0;
Example 5
-moz-border-radius: 36px 12px;
border-radius: 36px 12px;
Example 6
-webkit-border-top-right-radius: 30px;
-moz-border-radius-topleft: 30px;
-moz-border-radius-topright: 30px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
Example 7
-webkit-border-top-right-radius: 50px 30px;
-moz-border-radius-topleft:50px 30px;
-moz-border-radius-topright: 50px 30px;
border-top-left-radius: 50px 30px;
border-top-right-radius: 50px 30px;
and a lot more…
Here, I would like to mention about this cool online CSS “border-radius” tool which generates the CSS3 code for you. All you have to do is just set the desired “border-radius” value, copy the CSS code generated and paste it in your stylesheet as shown in the codebox below.
.example {
background-color:#F1F1F1;
border:3px solid #DDD;
text-align:center;
width:400px;
padding:10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
To summarize, this CSS3 border-radius property minimizes the usage of images in our website, saves our time and speeds up the page loadings.
