CSS: border-radius и первая строка в таблице с фоном?

Question

[SilverOK]

Всем привет!

Столкнулся с проблемой: нужно сделать таблицу с закругленными углами и что бы первая строка таблицы была залита серым цветом. Проблема состоит в том, что при заливки первой строки, она выходит за рамки округления.




Как правильно оформить/убрать косяк?


Надеюсь, внятно описал суть проблемы.


Заумными способами получилось сделать как надо, но нужен более простой вариант.


Спасибо.

Answer 1

[Ivan]

сделать строке border-top-left-radius и border-top-right-radius, аналогичный таблице?

Comments

[SilverOK]

Делал. Но фикс border-radius.htc в IE понимает.

[Ivan]

С IE грустно, да…

[makecode]

Этот фикс понимает css3pie.com/

Answer 2

[Андрей]

С закруглением таблиц полнейший геморрой, оберните таблицу в div и его закруглите, если всё равно будет вылазить, дайте overflow: hidden;

Comments

[Максим Болтик]

Только с границами табоицы косяк.

Answer 3

[nonexistent]

В каком браузере такой косяк?

Comments

[SilverOK]

У всех браузерах.

Answer 4

[XaBoK]

У меня была подобная проблема на сотовых и по поиск в нете дал решение — в 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;
}


Comments

[SilverOK]

А в чем подвох прозрачной заливки?

[XaBoK]

А я не знаю, я нашёл этот вариант в HTML5 ★ Boilerplate. Для Webkit там вообще советуют -webkit-background-clip как показывают в fixing-the-background-bleed