Replacing CSS with CSS

I have been replacing my square boxes with round-cornered boxes using this CSS:

.t {background: url(images/dot_B76E62.gif) 0 0 repeat-x; width: 53em}
.l {background: url(images/dot_B76E62.gif) 0 0 repeat-y; height: 15em}
.r {background: url(images/dot_B76E62.gif) 100% 0 repeat-y; height: 15em}
.b {background: url(images/dot_B76E62.gif) 0 100% repeat-x;}
.bl {background: url(images/box_bottom_left.gif) 0 100% no-repeat;border:none;height: 15em}
.br {background: url(images/box_bottom_right.gif) 100% 100% no-repeat;height: 15em}
.tl {background: url(images/box_top_left.gif) 0 0 no-repeat;height: 15em}
.tr {background: url(images/box_top_right.gif) 100% 0 no-repeat;padding:10px;height: 15em}

Code (markup):

And it works fine, along with this html:

<div class="t"><div class="b"><div class="l"><div class="r"><div class="b"><div class="br"><div class="tl"><div class="tr">
</div></div></div></div></div></div></div></div>

Code (markup):

I tried replacing this content-list box, css (below), with the above css, but it didn't work correctly, can you assist me?

/*--Content List Container--*/
#content-list {
  width: 640px;
  display: inline-block;
  list-style-type: none;
  border: 6px solid #960000;
  margin-bottom: 5px;
  float: left;
}

#content-list li {
  list-style-type: none;
}

.content-list-narrow {
  width: 256px;
  padding: 5px 4px;
}

#content-list-narrow li {
  margin: 5px 0px;
}

#content-list a:link { color: #000000; text-decoration: none; }
#content-list a:visited { color: #5798ca; text-decoration: none; }
#content-list a:hover { color: #a9ceea; }

.content-list-thumb {
  width: 102px;
  list-style-type: none;
  float: left;
  padding: -22px 0px -20px -22px;
  margin: 10px 10px;
}

.content-list-thumb li {
  display: inline;
}

.content-list-info {
  display: inline-block;
  list-style-type: none;
  width: 688px;
  float: left;
  margin: 2px 8px;
  border-left: 1px solid #ffffff;
}

.content-list-info li {
  padding: 2px;
}

Code (markup):

 

the content-list box will be using a completely different HTML structure to that of the rounded corner set up. I always try to avoid code like that, because it is very bloated for such a simple effect, have you tried using rounded corners from css3?

That rounded corner CSS will only work with it's corresponding HTML structure, because it is calling the relevant classes.