Dave Woods - Freelance Web Design Warwickshire

Creating Rounded Corner CSS Boxes Using One Image

I wrote an article some time ago which explained how to create rounded corners using just a single image and CSS. It’s a great solution but imagine if you have multiple boxes and you’d like to use different colours for each box?

Within this tutorial, I’ll explain how you can create multiple rounded boxes using different colours but still using just a single image.

Here’s an example of what you could create using this method:

And here’s the image that I’ve used for the purpose of this tutorial:

As you can see, I’ve created a colour palette with each circle being a colour that could be used as a coloured box. You can obviously change these to fit in with your colour scheme but for the purpose of this tutorial, you’ll hopefully see how it’s being used.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Rounded Corners</title>
</head>
<body>
<div id="container">
<h1>Rounded Boxes</h1>
<div class="red-box">
<span class="tl"></span><span class="tr"></span>
<div class="box-content">
<h2>Red Box</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
<p>Vestibulum erat metus, sagittis sed, mollis ut, vestibulum nec, lacus. Sed ornare semper augue.</p>
</div>
<span class="bl"></span><span class="br"></span>
</div>
<div class="blue-box">
<span class="tl"></span><span class="tr"></span>
<div class="box-content">
<h2>Blue Box</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
<p>Vestibulum erat metus, sagittis sed, mollis ut, vestibulum nec, lacus. Sed ornare semper augue.</p>
</div>
<span class="bl"></span><span class="br"></span>
</div>
<div class="green-box">
<span class="tl"></span><span class="tr"></span>
<div class="box-content">
<h2>Green Box</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
<p>Vestibulum erat metus, sagittis sed, mollis ut, vestibulum nec, lacus. Sed ornare semper augue.</p>
</div>
<span class="bl"></span><span class="br"></span>
</div>
</div>
</body>
</html>

The HTML is fairly simple and includes a containing div for each box and a span for each corner of the box.

CSS

We’ll start off the CSS with some basic CSS reset and formatting

* {
padding: 0;
margin: 0;
}
body {
padding: 10px;
font: 77%/1.5 verdana, arial, helvetica, sans-serif;
}
h1 {
margin-bottom: 0.5em;
font-size: 1.4em;
}
h2 {
font-size: 1.2em;
line-height: 1;
}
p {
margin-bottom: 1em;
}

Next, we’ll apply the same background image to each corner and set the width and the height. What this does, is simply show 10px by 10px of the image which we can then manipulate using the background-position to show the part of this image that’s required.

.tl, .tr, .bl, .br {
background: url(corners.gif);
width: 10px;
height: 10px;
font-size: 0;
}

Then, we’ll simply float the corners into position

.tl, .bl {
float: left;
}
.tr, .br {
float: right;
}

To ensure that the content fits nicely within the box, we need to clear the floats and apply some padding and also apply the haslayout fix for Internet Explorer.

.box-content {
clear: both;
padding: 0 10px;
overflow: hidden;
}
* html .box-content {
height: 1%;
}

Next we’ll start by dealing with the red container by giving it a width, background colour, text colour, margin and overflow (to clear the float’s).

.red-box {
background: #F00;
color: #FFF;
width: 500px;
overflow: hidden;
margin: 10px 0;
}

Now comes the real trickery. In order to display the corner of the image that we need to round the corner correctly, we manipulate the background-position of each of the spans to pull the background image into position:

.red-box .tr {
background-position: 10px 0;
}
.red-box .bl {
background-position: 0 10px;
}
.red-box .br {
background-position: 10px 10px;
}

Ok, so that’s one rounded box completed, but what about the blue and green boxes? We follow exactly the same principle as we did with the red box and simply define the styles that are different for the blue box, like so…

.blue-box {
background: #09F;
color: #FFF;
width: 200px;
overflow: hidden;
margin: 10px 0;
}
.blue-box .tl {
background-position: -320px 0px;
}
.blue-box .tr {
background-position: -330px 0px;
}
.blue-box .bl {
background-position: -320px 10px;
}
.blue-box .br {
background-position: -330px 10px;
}

And then use the following CSS for the green box…

.green-box {
background: #6F0;
color: #FFF;
width: 100%;
overflow: hidden;
margin: 10px 0;
}
.green-box .tl {
background-position: -160px 0px;
}
.green-box .tr {
background-position: -170px 0px;
}
.green-box .bl {
background-position: -160px 10px;
}
.green-box .br {
background-position: -170px 10px;
}

Summary

Obviously you’ll want to change the image that I’ve used to something that matches the colours used within your designs but as a CSS technique, I’ve started using this method in any projects where I’ll need to use various rounded corners.

15 comments on “Creating Rounded Corner CSS Boxes Using One Image”

  2. Dave Post author

    Hi Sashidhar,

    Thanks for pointing that out. That was an oversight on my part as I’d not applied the haslayout fixes for Internet Explorer.

    I’ve added these now and also put in a couple of fixes for IE6 so this will now work for all the latest browsers (and will even work in IE5.5)

    Hope that helps and thanks again for spotting the error.

  3. Miles Johnson

    A very nice technique but it also bogs down the code with extra code, but I guess the same would go when appending the classes using javascript. If only the content commands worked like we wanted:

    div:after { content: add more classes!; }

    Anyways very nice instructions, but what if the background isnt white and is alternating colors, thats where the trouble begins!

  4. Dave Post author

    Hi Miles,

    Or even better, with CSS3 we’ll be able to apply multiple background images.

    For alternating background colours, you could always add more to the image with some of the circles against a different background so you could still use the same technique.

    It’s not ideal for all situations but is certainly an option worth considering.

  7. Pingback: Tagging the Web Daily 04/09/2008 « PAB Skunkworks Weblog

  9. Doug C.

    Dave, this is awesome stuff. I only have one question: how does it pull each corner from that long line of dots in the graphic? That’s blowing my mind.

  10. Dave Post author

    Hi Doug, it simply uses a width and height to define the size of the corner and then uses the background position to slide the graphic into the correct position.

  11. Carl Schultz

    Dave,

    Thanks for your site and work. I am a 63 year old who started in the web about 1995. Now I am back and trying to learn the new “stuff’ CSS layouts and writing in particular.

    Your simple approach helps me build my skills one level at a time. Thank You very much!

  12. Eric Pugh

    Wonderful idea and I’ve got the red, blue and green working but I just cannot get the other colours to work.
    It just keeps picking up the red corners if I use any of the other colours.
    I must be doing something wrong but what?
    Your help would be much appreciated.

  15. Kedar

    I am Web Designer and I am working from last 6 years
    I like your trick to make css rounded corners Its best and easy to use

    Keep it up
    Good Work!