Steve Worley

Rounded corners have been a rather difficult thing to implement — well until the release of CSS3 — it required us to use images in weird and wonderful ways. Personally now I usually use the CSS3 border-radius property to achieve rounded borders making sure to include the vendor prefixes (-webkit, -moz, -o etc.) to make sure that there is maximum compatibility with my design, and when the browser doesn’t support the border radius property at all it falls back to square edges — graceful degradation, but that’s another story.

In this post I’ll go through some of the ways that I have learned for implementing rounded corners. I’m sure there are other ways of doing it, if you have any other methods I’d love to hear them.

Single Image Background Image

Aside from using CSS3 this would probably be the easiest way to implement rounded corners, however it is the most restrictive. Using a single image means that you are restricted to using elements of all the same width and height. This method is usually best used for important things on the page and typically can’t be replicated across a wide range of elements (unless they’re the same dimensions).

To do this we just add the image as a background-image to the element we want to be rounded:

CSS
.rounded1 {
background-image: url(my-rounded-corners.jpg);
display: block;
height: 50px; /* height of our image */
width: 50px; /* width of our image */
}
HTML
<div class="rounded1">
Content
</div>
Example

This is probably my least favourite way of implementing rounded corners, but was a stepping stone for getting into the next method. This method is far to restrictive to have wide usage in a design in my opinion — none the less some things to look out for with this method:

• PNG transparency isn’t supported in IE6 or lower

Double span method

I’m not really sure if this method has a coined name so I’ll name it the double span method because, well it uses two span elements (they don’t have to be span elements but this is how I first saw it used, you can modify it to use double div’s or basically any other element as long as it is displayed block or inline-block). This method works by padding the ends of both spans the by the width of the corners of your image. You will need an image that looks similar to this:

The mark up for this method is a little messy because we need to use 2 elements. Here is what the HTML will look like:
<a href="#" class="button"><span><span>Button Text</span></span></a>

CSS:
.button span {
display: inline-block; /* if displaying block you will need to float them */
background: transparent url(my-rounded-image2.jpg) 0 0 no-repeat;
padding-left: 10px; /* This will be the width of the corner piece at the left of the image */
height: 50px; /* height of your image */
}
.button span span {
background-position: right;
padding-right: 10px; /* to keep the sides even */
padding-left: 0;
padding-top: 15px; /* you can use padding-top to vertically center your text */
height: 35px; /* height = padding top - image height */
}
The above will get you something that looks like this:
Button Text

You can change this method to work with tops and bottoms (rather than sides) so you have a scaling rounded background for your page, this works well when you want a rounded background on side bar widgets and things like that. I wouldn’t suggest using this method for an entire page background you would need quite a large background image to get the effect just right (if the image runs out of height then it will look silly). The best thing about this method is that it can scale according to your content — as long as your image allows for it. I could put “this is a really long sentence” as the button text and the rounded background would expand to fit it in.

Border Radius

I thought I’d add in a bit about border radius in case you wanted to use some CSS3. This method is by far the best, but its compatibility problems might stop you from using it in all projects — so it’s good to know other ways to get rounded corners so you don’t limit yourself on your designs. One thing to note about the border radius property is that you can individually set each corners radius (so you can make some pretty awesome shapes, purely with CSS). Here’s some examples: