Rounded corners... need a little help :)

Hey

I'm trying to create rounded corners for my table (if you could call it that ).

I have this in my CSS file:

b.btop, b.btop b, b.bbot, b.bbot b{
    display: block;height: 10px;font-size: 1px;
    background-image:url(images/rc.png);
    background-repeat: no-repeat}
b.btop b{background-position: 100% -10px}
b.bbot{background-position: 0 -20px}
b.bbot b{background-position: 100% -30px} 

Code (markup):

And this is the HTML:

<div id="box">
<b class="btop"><b></b></b>
content here...
<b class="bbot"><b></b></b>
</div>

Code (markup):

The rounded corners work, thank god, but I need to make my table background colour #92aaf0.

I have tried putting

background-color: #92aaf0;

in some places but whenever it does that the background colour seems to "overlap" the rounded corner image so my table isnt rounded anymore.

Can anyone offer some help? Cheers

 

This is off the top of my head, without looking at your site, so you'l have to excuse me if it doesn't work...

But have you tried editing your corner images so the background colour to those is the same as the background colour of your site, if that makes sense (rather than a transparent bg on the corner images background).

So if the page bg is red, say, set the colour outside the corners to red.

Does that make sense?

 

yeah but there's a way to do it with transparent images as well.

Without looking at the site I can't tell what's actually going on.