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
-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.
Other related posts
No need image again to create rounded corner
Thanks bro..
Welcome, Dhe…It’s really frustrating when designing a template which need to have corner border images…It’s even worse if you don’t know to use photoshop…
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