Nested rounded boxes... inheritence issue

[cusimar9]

If someone could shed some light on this I would be grateful.

I've made some rounded boxes and their implementation differs slightly to other examples (i.e. fully resizeable div with a single transparent png sprite for the corners)

They work really well, except I've a little problem with inheritance and nested boxes.

The css is as follows:


/* ROUNDED BLUE STYLES */
.blue .pad, .blue .tm, .blue .bm { background: #74a8ee; }
.blue .tl, .blue .tr, .blue .bl, .blue .br { background: url(rounded.png) no-repeat; }

/* ROUNDED GREEN STYLES */
.green .pad, .green .tm, .green .bm { background: #74ee77; }
.green .tl, .green .tr, .green .bl, .green .br { background: url(rounded_green.png) no-repeat; }

/* GENERAL ROUNDED STYLES */
.round { position: relative; }
.round .pad { padding: 15px 20px; }

.round .tl, .round .tr, .round .bl, .round .br { width: 6px; height: 6px; position: absolute; overflow: hidden; }

.round .tl { top:0;left:0; background-position: 0 0; }
.round .tr { top:0;right:0; background-position: -6px 0; }
.round .bl { bottom:0;left:0; background-position: 0 -6px; }
.round .br { bottom:0;right:0; background-position: -6px -6px; }

.round .tm, .round .bm { margin: 0 6px; height: 5px; overflow: hidden; }


And the corresponding mark-up is:


<div class="round green">
<div class="tl"></div><div class="tm"></div><div class="tr"></div><div class="pad">
Hello
</div><div class="bl"></div><div class="bm"></div><div class="br"></div>
</div>


As you can see I would like to separate the colour from the 'round' css, so I can declare numerous different colours for boxes.

However this messes up when I have nested divs, namely a 'green' div within a 'blue' div. You can see an online example of the issue here (http://www.richlyn.co.uk/round/test.html), the top boxes are OK i.e. blue within green, but the bottom example shows the problem.

This is simply down to the order of my css, but I can't really think of a clean solution.

Any advice would be much appreciated.