Блок со скруглёнными углами

[Nik]

Решил поэкспериментировать с круглыми углами.

Соорудил вот такую конструкцию:

Код: (html4strict) [Выделить]

<table class="msg_top" width="100%" cellspacing="0" cellpadding="0"><tr>
<td class="msg_tl"></td>
<td>текст</td>
<td class="msg_tr"></td>
</tr></table>

Код: (css) [Выделить]

.msg_top {height: 25px;background: url("images/msg_t.gif") repeat-x;}
.msg_tl {height: 25px;width: 15px;background: url("images/msg_tl.gif") no-repeat top left;}
.msg_tr {height: 25px;width: 15px;background: url("images/msg_tr.gif") no-repeat top right;}
Кто знает, как избавиться от таблиц? Не могу найти ни одного нормального примера

[Nik]

Кажется разобрался. Вот код, вдруг кому-нибудь пригодиться:

Код: (html4strict) [Выделить]

<div class="msg_tl"><div class="msg_tr">
<div class="msg_top">
текст
</div>
</div></div>

Код: (css) [Выделить]

.msg_top { background: url("images/msg_t.gif") repeat-x; height:25px; width:100%; min-width: 380px;}
.msg_tl { background: url("images/msg_tl.gif") no-repeat; height:25px; }
.msg_tr { background: url("images/msg_tr.gif") right top no-repeat; height:25px; padding: 0 15px; }

[Nikitian]

Всё проще, чем кажется. Например скругление вида \_/ делается так:

Код: [Выделить]

<i class="c1"></i><i class="c2"></i><i class="c3"></i>css:

Код: [Выделить]

.c1{display:block;margin: 0;width:100%;}
.c2{display:block;margin: 0 1px;width:100%;}
.c3{display:block;margin: 0 2px;width:100%;}Об этом более подробно: http://www.html.it/articoli/nifty/index.html

[GogA]

Nikitian, интересно спасиб
Для извращенцев, как вообще без картинок на сайте обойтись, используя графику!
http://rutube.ru/tracks/72829.html?v=4319b106a08ace656e8e698cc403e904
Мега ролик, в принципе это должен осознать каждый веб-дизайнер/разработчик

зы. у самизнаете кого (www.artlebedev.ru) на сайте для скругления используются картинки.. в принципе я пока этого же варианта придерживаюсь