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
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:
We've used class="bl" as we're going to assign our bottom left corner to this
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:
- 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.
- 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 theand 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 0would be used and the image would be placed in the top-left corner. - Repeat command - Obviously we don't want this image to repeat, so we inserted the
no-repeatCSS command. If we wanted to, we could have usedrepeat-x, to repeat the image horizontally,repeat-y, to repeat it vertically, andrepeatto repeat it both horizontally and vertically. If this command was left out then the default value,repeatwould be used.
It doesn't matter in which order these three CSS background commands are placed. Our box with curves now looks like:
