CSS Rounded Corners24 January 2008
CSS Rounded Corners – Using only one image file!
There are lots of tutorials on this subject, yet most of the one’s you see require the use of four separate images, which means a lot of fiddly photoshop work; cutting, pasting, naming and saving – all times four.
This method will still need four divs, but it will utilise just one non-symmetrical image, aligned (i.e. not split) as indicated in this diagram:
As you can see the layout of the divs is not typical of the traditional four-image method, but rather there is one huge wrapping div with two small divs fixed in the top-right and bottom-left corners and the content-containing div aligned to the bottom right corner.
Therefore the HTML will look like this, (notice the lack of recursive nesting):
And here is the the heart of the CSS (note the alignment attributes in the background properties):
The top-left div provides the top-left rounded corner and the top and left borders – thus the need for padding of equal size to the size of the top-right and bottom-left divs. This padding in the top and left sides prevents the bottom-right div from obscuring the wrapping div’s borders and corner.
The two small divs in the top-right and bottom-left just provide rounded corners.
Absolute positiong is needed for the two small divs – remember that to absolutely position a div, its parent div must be assigned relative position.
The bottom-right div actually contains the content text or picture. It provides both a rounded corner and the right and bottom borders. It is also responsible for stretching the top-left-wrapping-div to size.
Interestingly this method can be used to display a non-symmetrical detail in the bottom-right corner.
Here’s another approach to rounded corners with a single image but using a slightly different method.
CSS for MSIE before version 7