CSS and round corners: Boxes with curves

One of the main reasons for having to use images on any web page is to create curves and round corners. It's currently impossible to create any kind of curved shapes using just HTML, so images need to be used. Putting these images into the HTML document with a table layout can create a large amount of superfluous code.

Using the power of CSS we'll create the following box with round corners, without an <img> tag in sight:

How it works

The above box is basically a normal box with an orange background colour and four corner images superimposed on top. All these images have been called up through CSS commands. So, we start off with:

<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 left corner to this <div> through a CSS command. As a rule, you can only assign one background image to an HTML tag with CSS, so this is the only image we'll assign to this <div>. We'll use this image and call it bl.gif, and then place it in the bottom-left corner with this CSS command:

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

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

1. Image URL - Remember, the image is being called up through the CSS so the path to the image is from the CSS document and 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> and the second number the distance from the top edge. In this instance % was used, but a different distance value such as em or px could have been used instead. If this command was left out then 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 inserted 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 then 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: