CSS and round corners: Boxes with curves

Padding & IE Issues

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:

Lorem ipsum dolor sit amet consectetur adipisicing elit

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}
Lorem ipsum dolor sit amet consectetur adipisicing elit

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">&nbsp;</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">&nbsp;</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}

You might also like...

Comments

About the author

Trenton Moss United Kingdom

This article was written by Trenton Moss. Trenton's crazy about web accessibility and usability - so crazy that he went and started his own web accessibil...

Interested in writing for us? Find out more.

Contribute

Why not write for us? Or you could submit an event or a user group in your area. Alternatively just tell us what you think!

Our tools

We've got automatic conversion tools to convert C# to VB.NET, VB.NET to C#. Also you can compress javascript and compress css and generate sql connection strings.

“Anyone who considers arithmetic methods of producing random digits is, of course, in a state of sin.” - John von Neumann