CSS and round corners: Boxes with curves

Bottom & Top Curves

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 (Bottom-right curve), 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:

Lorem ipsum dolor sit amet consectetur adipisicing elit

Top curves

To make our top curves we'll need two new images, Top-left curve and Top-right curve, 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:

Lorem ipsum dolor sit amet consectetur adipisicing elit

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:

Lorem ipsum dolor sit amet consectetur adipisicing elit

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.

“UNIX is basically a simple operating system, but you have to be a genius to understand the simplicity.” - Dennis Ritchie