HomeBoxes 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 right 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 called 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 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 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 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:
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>
Naming our 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 our last one, but now we've changed the position from the left to 100%, where previously it was 0%. Our box now looks like:
Top curves
To make our top curves we'll need two new images, 
and 
, which we'll call tl.gif and tr.gif. We'll then 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>
And our new CSS rules:
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat}
Giving us:
Background colour
We'll now insert our orange background colour into the box, so as 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. In this example the images don't overlap so we don't really notice this layering effect.
A background colour by default 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:
Padding
Padding is needed to prevent the text from overlapping on to the images, which are 10px by 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 inside elements will inherit that padding. If we were to assign padding to the very first <div>, <div class=""bl">, we'd get the following:
To get this padding working 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}
Internet Explorer issues
You may have noticed the bottom corners were called up before the top two corners. If we were to do this the other way round, that is call up the top corners first, some parts of the orange background colour 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 overlap on to the element below, again causing a highly unsightly effect. This can be simply solved by placing a tiny placeholder beneath our box with round corners. Immediately after the fourth closing </div>, insert the following HTML:
<div class="clear"> </div>
And assign it this CSS rule:
.clear {font-size: 1px; height: 1px}
The final code
Our finished HTML now looks like:
<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"> </div>
And 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}
This article was written by Trenton Moss, founder of Webcredible, a web usability and accessibility consultancy. He's extremely good at usability testing and knows an awful lot about the user centered design process.
]
[
]