Закругление углов с помощью таблицы (проверено в IE7 и Firefox 3.0.15)

По моему мнение самый универсальный способ закругления углов в 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 !