Dave Woods - HTML, CSS, Web Design

Personal Website of a Web Designer

Image of WWW painted on a road

Subscribe in a reader technorati fav

Meta:


Flickr:



Blog Advertising - Get Paid to Blog
Dave Woods is a 28 year old freelance web designer from the UK. He specialises in HTML & CSS using the latest web standards to ensure cross browser compliance, search engine friendly, usable and accessible websites are of the highest quality.

Creating Rounded Corner CSS Boxes Using One Image

Published by Dave | Filed under CSS Layouts, CSS, Web Design, HTML

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.

[Slashdot] [Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google]
April 3rd, 2008


8 Responses to “Creating Rounded Corner CSS Boxes Using One Image”

  1. Sashidhar Kokku Says:
    April 3rd, 2008 at 4:57 pm

    Hi,
    Your technique works fine in Firefox, rather it works beautifully. However, it does not render properly in IE 7.

    Any ideas?

    Thanks,
    SK

  2. Dave Says:
    April 3rd, 2008 at 5:20 pm

    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 Says:
    April 5th, 2008 at 11:34 pm

    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 Says:
    April 5th, 2008 at 11:45 pm

    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.

  5. James Hopkins Says:
    April 7th, 2008 at 5:58 pm

    A well-explained article there, Dave. Regarding CSS3, even better than multiple bg’s for this instance is border-radius

  6. Dave Says:
    April 7th, 2008 at 8:54 pm

    Good point James and I completely agree.

  7. Tagging the Web Daily 04/09/2008 « PAB Skunkworks Weblog Says:
    April 10th, 2008 at 12:30 am

    […] Tagging the Web Daily 04/09/2008 Filed under: Uncategorized — happyfunball96 @ 5:41 pm Dave Woods - HTML, CSS, Web Design » Creating Rounded Corner CSS Boxes Using One Image […]

  8. Ruud Says:
    April 21st, 2008 at 10:36 pm

    Hi Dave,

    Your technique explained above works fine. Thanks!

    For a technique without images, take a look at http://www.malsup.com/jquery/corner/

    Note that it uses the jquery library.

    Cheers,
    Ruud.

Leave a Comment