По моему мнение самый универсальный способ закругления углов в IE это через таблицу. Сразу покажу что мы получим в результате:
Для этого нам понадобятся четыре угла, которые нужно нарисовать, я использовал GIMP:
уголки маленкие, 6х6 пикселей, в моем случае нужны были именно такие. И четыре картинки для бордеров (картинки есть, они просто очень мелкие, бордер всего 1px):
Вот по поводу использования бордеров в этом случае терзают сомнения, я думаю должен быть какой-нибудь способ более простой, если кто-то знает и поделится - буду очень благодарен.
Сам HTML код:
<table style="background-color: white;" width="15%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td><img src="corner_top_left.gif" width="6" height="6"/></td>
<td height="6px" style="background-image: url('border_top.gif'); background-repeat: repeat-x; height: 6px;"></td>
<td><img src="corner_top_right.gif" width="6" height="6"/></td>
</tr>
<tr>
<td height="6px" style="background-image: url('border_left.gif'); height: 6px;"></td>
<td width="100%">
Содержимое округлого блока тут
</td>
<td height="6px" style="background-image: url('border_right.gif'); height: 6px;"></td>
</tr>
<tr>
<td><img src="corner_bottom_left.gif" width="6" height="6"/></td>
<td height="6px" style="background-image: url('border_bottom.gif'); background-repeat: repeat-x; height: 6px;"></td>
<td><img src="corner_bottom_right.gif" width="6" height="6"/></td>
</tr>
</table>
Для IE7 имеет разница форматирование HTML. Что это означает? Означает следующее, что записи:
<tr>
<td>Bla bla bla bla</td>
</tr>
и
<tr><td>Bla bla bla bla</td></tr>
IE трактует
по разному, и соответственно результат который вы будете видеть в браузере тоже будет разным. В первом случае как я понял он пытается вставить пустую линию и получается что попало, так что обратите на это внимание.
PS: Ненавижу IE !
