CSS Rounded Corners

Posted by legacye in Home on 04 24th, 2009 | no responses

A recent project required us to use our Ninja-like CSS skills to come up with a neat solution for rounded corners for divs. Rounded corners are one of the most popular CSS techniques floating around Google at the moment but there’s still an interesting debate as to how it’s best to get done. Having reviewed some of the many techniques you can use to create these (a few of which even suggested using javascript – are those guys HIGH? :)). In the end I found that the most effecient way to achieve the effect was simply by adding an additional div to the top and bottom of your regular box with an image element to add the rounded corners. For our particular case a rounded corner box of fixed width was used so this was relatively straightforward. If however you’d like to vary the widths, you’ll need to create three divs (left-corner-image, line, right-corner-image) for the bottom and top but it’s certainly doable. I’m attaching some code below in case its of help to anyone. Have a good Friday, y’all.

Download