CSS and Round Corners: Build Boxes with Curves

This post comes from http://www.sitepoint.com

One of the main reasons why designers use images on a Webpage is to create curves and round corners. It's currently impossibleto 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 tablelayout can create a large amount of superfluous code. In this tutorial,we'll use CSS to create this box with round corners, without an <img> tag in sight!

How it Works

The above is basically a normal box that has an orange backgroundcolour, over which four corner images are superimposed. All theseimages 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 backgroundimage to an HTML tag using CSS, so this is the only image we'll assignto this <div>.

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

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

1. Image URL - Remember, the image isbeing called through the CSS, so the path to the image must be the pathfrom 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 justas easily have been used instead. If this command was left out, thedefault 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.

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 nowwe've changed the position from the left to 100%, where previously itwas 0%. The box now looks like this.

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.

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 CSSrule. This is because each CSS background rule is essentially a layeron top of the previous one. So, in this example, we have a layeringorder 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 layeringeffect.

By default, a background colour covers the entire <div>and will layer on top of any other previously assigned backgroundimages 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 imagesand will essentially cause them to disappear. Therefore, we must placeour 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.

Padding

Padding is needed to prevent the text from overlapping on to theimages, which are 10px x 10px in size. Therefore, we need 10px-worth ofpadding 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 insideit will inherit that padding. If we were to assign padding to the veryfirst <div>, <div class=""bl">, we'd get this effect.

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.

Internet Explorer Issues

You may have noticed the bottom corners were called up before thetop corners. If we were to do things the other way round, that is, callthe top corners first, some parts of the orange background colour wouldsneak 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 ofthe box sometimes overlaps on to the element below, again causing anunattractive effect. This can be solved simply by placing a tinyplaceholder beneath the box with round corners. Immediately after thefourth 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}