Создаем круглые углы у изображения с неизвестными заранее размерами

Недавно на одном из моих любимых форумов была задачка о том, как реализовать следующую идею с картинкой: сделать рамку (или обрезать углы у изображения, как вам приятнее и понятнее : ) с круглыми углами, при условии, что размер картинки неизвестен. Сразу подмечу, что в данном примере использовалась графика.

Способов создания круглых углов очень много, использования графики, и заканчивая попиксельным выравниванием. За основу я взял способ, придуманный Adam'ом Kalsey'ем, (по крайней мере, на его сайте я наткнулся на такую конструкцию), по созданию круглых углов у блоков.

Итак, приступим. Для начала нам понадобятся сами углы, рисуем четыре прозрачных гифа.

Используются четыре блока roundcont-это блок-контейнер, куда помещены остальные элементы-это два блока с углами:roundtop-это для верхних углов и roundbottom-для нижних, блок img для картинки.

Далее дело техники: помещаем все в блок-контейнер, прописываем ему свойство float, т.к. мы не знаем заранее ширину картинки, то при помощи свойства float достигнем того, чтобы блок принимал ширину по содержимому. Для блока с картинкой задаем отрицательные поля, на высоту блоков с углами.
Во внутренние блоки вкладываем картинку-уголок, выровненную по левому краю, и задаем бэгграундом другой уголок в правом углу. При помощи z-index перекрываем изображение.

css:

.roundcont {
width: auto;
float:left;
margin:10px;
z-index:10;}

.roundtop { z-index:10;
background: url(i/tr.gif) no-repeat top right;
position:relative;}

.roundbottom {
background: url(i/br.gif) no-repeat top right;
z-index:10;
position: relative;}
*html .roundbottom{position: static;}/*хак для IE6*/
img.corner {
width: 14px;
height: 16px;
border: none;
display: block !important;
}
.img{ margin:-16px 0;}

В Internet Explorer (в 7-ом не проверял) пропадает бэгграунд у нижнего блока, а вместе с ним и наш уголок. Проблема решается хаком *html. Если случается писать хак, лучше пользоваться условными комментариями.

code:

<div class="roundcont">
<div class="roundtop">
<img src="i/tl.gif" alt="" width="14" height="16" class="corner" />
</div>
<div class="img">
<img src="i/flower.jpg" width="200px" height="180px" alt="" />
</div>
<div class="roundbottom">
<img src="i/bl.gif" alt="" width="11" height="12" class="corner" />
</div>
</div>

В результате This Page Is Valid XHTML 1.0 Transitional!, прекрасно работает в FF1.5, IE6, Opera8.5, Opera9. Минусом кажется то, что блок все-таки имеет свойство float, но это легко решить вложенностью div'ов.