Replacing CSS with CSS

HTML & CSS
1

I have been replacing my web’s 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}

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>

I tried replacing this contentlist 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;