Vertical Gradient Model

Well, this model would require more effort, we should:

1.Modify the upper and lower edges of the height (depending on your gradient).
2.Modify the upper and lower edges of the background image positioning (depending on your gradient).
3.Use 1px repeating-x background image to create gradient effect for container div.
4.Define the size for the content, or set a minimum height for the container (again, depends on gradient).

Let’s get started!

HTML code (the same as before):

<div class=”roundedBox” id=”type5″>
<strong>My content in roundedBox Type 5</strong>
<div class=”corner topLeft”></div>
<div class=”corner topRight”></div>

<div class=”corner bottomLeft”></div>
<div class=”corner bottomRight”></div>
</div>

CSS code:

My gradients is vertical, so we have to increase the height on the upper corner, and modify the background image positioning of the lower corner.


You will know how it works when you see my new sprite. This is how it looks like in my div.

Define container div:

#type5 {background:#FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0; min-height:110px;}

Add in all corners (I’ve change the format of the picture to .png in order to get better gradient quality)

#type5 {background:#FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0; min-height:110px;}
#type5 .corner {background-image:url(../images/corners-type5.png);}
Now we increase the height of the corner (this depends on the final colour that the top reaches).

#type5 {background:#FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0; min-height:110px;}
#type5 .corner {background-image:url(../images/corners-type5.png);}
#type5 .topLeft,
#type5 .topRight {height:140px;}
At the end, I adjust the positioning of the lower corners.

#type5 {background:#FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0; min-height:110px;}
#type5 .corner {background-image:url(../images/corners-type5.png);}
#type5 .topLeft,
#type5 .topRight {height:140px;}
#type5 .bottomLeft {background-position:-1px -142px;}
#type5 .bottomRight {background-position:-19px -142px;}

IE6 version
You need to define both width and height for (.roundedBox, or #type1, #type2, etc), otherwise they will split out, also don’t forget to check with IE6 conditions.

Edited By Dan Li