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:
Comments