By: Trenton Moss

March 18th, 2005

Reader Rating: 8.5

One of the main reasons why designers use images on a Web page is to create curves and round corners. It's currently impossible to create any kind of curved shapes using pure HTML, so images need to be applied.

The problem? Putting these images into an HTML document with a table layout can create a large amount of superfluous code. In this tutorial, we'll use CSS to create this box with round corners [1], without an <img> tag in sight!

How it Works

The above is basically a normal box that has an orange background colour, over which four corner images are superimposed. All these images have been called up through CSS commands.

So, we start off with the following snippet:

<div class="bl">Lorem ipsum dolor sit amet consectetur adipisicing elit</div>

We've used class="bl" as we're going to assign our bottom right corner to this <div> through a CSS command. As a rule, you can only assign one background image to an HTML tag using CSS, so this is the only image we'll assign to this <div>.

We'll use the above image, called bl.gif, which we'll place in the bottom-left corner with the following CSS command:

.bl {background: url(bl.gif) 0 100% no-repeat; width: 20em}

The CSS background command is broken into three sections: the image URL, its position, and a repeat command. We also inserted a width CSS command so that the box doesn't cover the whole of the screen. Let's examine the three background commands in turn:

1. Image URL - Remember, the image is being called through the CSS, so the path to the image must be the path from the CSS document, not the HTML document.


2. Image Position - In this example, we've used the command 0 100% in our CSS rule. The first number represents the distance from the left edge of the <div> ; the second number identifies the distance from the top edge. In this instance % was used, but a different distance value, such as em or px, could just as easily have been used instead. If this command was left out, the default value, 0 0, would be used, and the image would be placed in the top-left corner.


3. Repeat Command – Obviously, we don't want this image to repeat, so we insert the no-repeat CSS command. If we wanted to, we could have used repeat-x, to repeat the image horizontally, repeat-y, to repeat it vertically, and repeat to repeat it both horizontally and vertically. If this command was left out, the default value, repeat, would be used.

It doesn't matter in which order these three CSS background commands are placed. Our box with curves now looks like this [2].

Bottom-Right Curve

Next, we'll stick in that bottom-right curve. As previously mentioned, we can only assign one background image to each <div> in the CSS, so we'll need to insert a new <div>:

<div class="bl"><div class="br">
Lorem ipsum dolor sit amet consectetur adipisicing elit
</div></div>

Here's the image we'll use:

Naming this bottom-right image br.gif, we'll insert a new CSS rule:

.br {background: url(br.gif) 100% 100% no-repeat}

This CSS rule is essentially the same as the last one, although now we've changed the position from the left to 100%, where previously it was 0%. The box now looks like this [3].

Top Curves

To make our top curves, we'll need two new images:

We'll call these tl.gif and tr.gif. We'll need to create two new <div>s for them:

<div class="bl"><div class="br"><div class="tl"><div class="tr">
Lorem ipsum dolor sit amet consectetur adipisicing elit
</div></div></div></div>

The new CSS rules are as follows:

.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat}

These give us this display [4].

Background Colour

We'll now insert our orange background colour into the box, in order to achieve the whole round corners effects.

The background colour must always be assigned to the very first CSS rule. This is because each CSS background rule is essentially a layer on top of the previous one. So, in this example, we have a layering order of br.gif, bl.gif, tl.gif and then tr.gif. But, in this example, the images don't overlap, so we don't really notice this layering effect.

By default, a background colour covers the entire <div> and will layer on top of any other previously assigned background images and/or colours. Therefore, if we place the orange colour in any <div> other than the first, it will be placed on top of the preceding images and will essentially cause them to disappear. Therefore, we must place our orange background colour (#e68200) in the very first CSS rule:

.bl {background: url(bl.gif) 0 100% no-repeat #e68200; width: 20em}

As before, it doesn't matter where we place this colour command within the CSS background rule. Our box now looks like this [5].

Padding

Padding is needed to prevent the text from overlapping on to the images, which are 10px x 10px in size. Therefore, we need 10px-worth of padding on the text. But to which <div> should we assign the padding CSS rule? Does it matter? Well, yes it does.

Whichever element we assign padding to, each of the elements inside it will inherit that padding. If we were to assign padding to the very first <div>, <div class=""bl">, we'd get this effect [6].

To get this padding to work properly, we need to assign it to the very last <div>, <div class="bl">:

.tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px}

Here's how it looks now [7].

Internet Explorer Issues

You may have noticed the bottom corners were called up before the top corners. If we were to do things the other way round, that is, call the top corners first, some parts of the orange background colour would sneak out under the bottom curves, causing a rather unsightly effect. Switch the order of the <div>s around and see for yourself.

Another issue in Internet Explorer is that the background colour of the box sometimes overlaps on to the element below, again causing an unattractive effect. This can be solved simply by placing a tiny placeholder beneath the box with round corners. Immediately after the fourth closing </div>, insert the following HTML:

<div class="clear">&nbsp;</div>

Now, assign it this CSS rule:

.clear {font-size: 1px; height: 1px}

The Final Code

Our finished HTML now looks like this:

<div class="bl"><div class="br"><div class="tl"><div class="tr">
Lorem ipsum dolor sit amet consectetur adipisicing elit
</div></div></div></div>
<div class="clear">&nbsp;</div>

Here's the CSS that makes it all happen:

.bl {background: url(bl.gif) 0 100% no-repeat #e68200; width: 20em}
.br {background: url(br.gif) 100% 100% no-repeat}
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px}
.clear {font-size: 1px; height: 1px}

[1] http://www.sitepoint.com/examples/roundcorners/box-corners8.htm
[2] http://www.sitepoint.com/examples/roundcorners/box-corners3.htm
[3] http://www.sitepoint.com/examples/roundcorners/box-corners4.htm
[4] http://www.sitepoint.com/examples/roundcorners/box-corners5.htm
[5] http://www.sitepoint.com/examples/roundcorners/box-corners6.htm
[6] http://www.sitepoint.com/examples/roundcorners/box-corners7.htm
[7] http://www.sitepoint.com/examples/roundcorners/box-corners8.htm