How to create rounded corners with CSS3?

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. As I said in my previous post, this effect is only visible in latest versions of Mozilla Firefox, Chrome, Safari and Opera( for now). Here is a good news from Microsoft. Microsoft has announced CSS3 support in IE9. And, have a look at the update for CSS3 Border Radius property in IE9 Test Drive page.

The table below contains the CSS3 and browser-specific attributes:

CSS3 (Opera ) Gecko ( Mozilla ) WebKit ( Chrome, Safari )
border-top-right-radius -moz-border-radius-topright -webkit-border-top-right-radius
border-bottom-right-radius -moz-border-radius-bottomright -webkit-border-bottom-right-radius
border-bottom-left-radius -moz-border-radius-bottomleft -webkit-border-bottom-left-radius
border-top-left-radius -moz-border-radius-topleft -webkit-border-top-left-radius
border-radius -moz-border-radius -webkit-border-radius

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

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

Example 3

-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;

Example 4

-webkit-border-radius: 24px 0;
-moz-border-radius: 24px 0;
border-radius: 24px 0;

Example 5

-webkit-border-radius: 36px 12px;
-moz-border-radius: 36px 12px;
border-radius: 36px 12px;

Example 6

-webkit-border-top-left-radius: 30px;
-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-left-radius: 50px 30px;
-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.

Other related posts

7 Replies to “How to create rounded corners with CSS3?”

  1. This is achieved through “border-radius” property and really saves our time has been wasted on the creation of pictures around the edge of the border in Photo shop, then used in web design. For these all tutorials are really great to share with us.
    search engine position recently posted..SEO Consultant

Leave a Reply

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

CommentLuv badge

This site uses Akismet to reduce spam. Learn how your comment data is processed.