CSS: border-radius and first row in table with background?

Question

css

Hello!
I ran into a problem: you need to make a table with rounded corners and so that the first row of the table is filled with gray. The problem is that when filling the first line, it goes beyond the rounding.

How to arrange / remove the jamb?
I hope I have clearly described the problem.
It turned out to be done in abstruse ways, but a simpler option is needed.
Thank you.

Answer 1

make the line border-top-left-radius and border-top-right-radius similar to a table?

Answer 2

With the rounding of tables, complete hemorrhoids, wrap the table in a div and round it, if it still pops out, give overflow: hidden;

Answer 3

I had a similar problem on cellular phones and a search on the net gave a solution - I put a transparent one-pixel gif in the background:

.border
{
border-radius: 5px;
border: 1px solid #749a02;
-webkit-border-radius: 5px;
-op-border-radius: 5px;
-moz-border-radius: 5px;
background: url(/images/blank.gif) repeat-x;
}