How To: Dynamic Rounded Corners with CSS
At one point of time, I was so obsessed with rounded-corners. In my opinion, if used right, rounded corners will make an interface (especially segmented websites like blogs or portals) looks more manageable and attractive.
When I was just learning up web-development and HTML, I will make use of tables made from 9-cells (3x3) to realize my "rounded corner" desire. This is very simple, all you have to do is to create 4 images to represent the corners and arrange them up in such way (red lines signifies the cells):
There's absolutely nothing wrong with doing this, even now. However, I am personally sick of coding the tables - plus, should I decided I don't want the round corners anymore, it would be troublesome for me to edit the entire template file just to do that. However, thanks to the powerful styling properties of CSS, there's a better way to do this.
Before we dive into the code and styling, we need to understand how exactly is this done in CSS. The idea is similar to the table mentioned earlier, but a little bit simplified. The trick here is to use nested layers, with each containing one of the rounded corners.
The layers are nested within each other to ensure that they stick together. The bottom-most (outer-most) layer contains one of the corner, while also contains the background color of the entire box. The three inner layers contains the remaining corners, and the innermost layer will have the contents. To ease confusion, it can be visually represented as such:
The big trick behind this method is the corner images - they are actually made in reverse. Which means, instead of having an image of a corner, you have an image of the background WITH a transparent corner instead. Take a look at the blown up image of the individual corner below (note that the black area are actually transparent. I color them black to give a general idea on how it looks like:
Okay now let's get down and dirty with the code now, shall we?
First, the basic structure:
Then the basic CSS:
-
.rounded-outer {
-
background: #448ccb url('br.gif') no-repeat scroll bottom right;
-
width: 300px;
-
}
-
.rounded-1 {
-
background: url('bl.gif') no-repeat scroll bottom left;
-
}
-
.rounded-2 {
-
background: url('tl.gif') no-repeat scroll top left;
-
}
-
.rounded-inner {
-
background: url('tr.gif') no-repeat scroll top right;
-
padding : 10px;
-
font: normal normal normal 12pt "tahoma", "arial", sans-serif;
-
color: #fff;
-
}
Important things to remember:
- If you're going to apply any size (width or height) or outer margin to the entire box, make sure it is done on the outer layer.
- If you're going to apply any padding (inner margin) to the box, do it on the innermost layer.
If you have any questions, feel free to ask!
While a cool concept, I'm all for simplicity. For fixed-width designs, create a header image with the top left and top right corners; make a DIV with a background color, and a footer image with bottom left and bottom right corners. No tables, no browser issues!
I hate how people whine that they can't make their design compatible with X browser when people have been doing it for ages, and they're just trying to put more unnecessary CSS. K.I.S.S. I say.