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;