Tutorial: CSS Rounded Corners
Written by Nile | Posted in Tutorials | Posted on 
30-04-2010 | 
4 Comments
Tags: css, tutorial, web design
In the past, getting rounded corners meant you had to create a rounded rectangle, splice up the image, and then code it with HTML and CSS. A couple years ago, developers came up with a rounded corners attribute in CSS. It is called the border-radius.
This CSS trick does not currently work in Internet Explorer. These can best be seen in browsers like Mozilla Firefox and Safari. The corners will revert to being squared, but it will not cause any issues. Also, this trick is not considered W3 web standards compliant. It is a nifty trick that even Twitter has used on their layout.
The following below are the elements associated with this.
Firefox:
-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomleft
-moz-border-radius-bottomright
Safari:
-webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-border-bottom-left-radius
-webkit-border-bottom-right-radius
You may want to use all so this effect can be seen in as many browsers as possible.
There are two different versions as some browsers read each code in a slightly different manner.
To get this effect, you merely specify the area, usually a division layer in your actual web page.
<div class="roundedbox"></div>
In your web page’s CSS style sheet, you will need to define what you want the roundedbox to look like. In the case of this tutorial, I want a background with white and a border of light gray. In the case of this tutorial:
.roundedbox{
background:#fff;
width:100px;
border:1px solid #c0c0c0
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
}
The 5px can be replaced by a smaller or larger number. This number tells the browser how much of a curve radius the corner will be. In the case of 5px, the curve is slight. With 10px, the curve is a bit more noticeable.
Try it out! You can also remove some parts of the code to make it different. For example if you wanted the top corners to only be rounded you just remove the CSS for the bottom border radius elements.
Have you tried this out?
Related posts:
I can't tell you how many times I would have killed to be able to use this for the designing of the client sites I help one of my boss's with. But because she and the clients themselves use IE, guess who gets to create round-cornered squares and rectangles in Photoshop and then go through the fun of splicing and coding? *headdesk*
I know the feeling. I can only hope that Microsoft gets their buts in gear and updates their browsers to allow this. I think only when this can be seen in most browsers will it become web standards compliant.
Thanks for great piece of code Nile!
Too bad IE still ruins all the fun
I'm having roughly 25% of my website visitors use IE, so unfortunately I still have some fear of using it, else it would ruin my website appearance to the IE users
My recent post Dative Case German
So true, who gets to create round-cornered squares and rectangles in Photoshop and then go through the fun of splicing and coding? Jenn has raised a good point here. I once had the experience of actually using curvy corners but it was not an easy experience
Glad that today CSS are supported by all the major browsers.