Скругленные края для кропнутой картинки внутри div

[kosmos.ehp]

Помогите разобраться как сделать скругленные углы в моей ситуации. Суть проблемы в следующем:
Подгружаю картинку размера 450х450, кроплю ее при помощи дива размер которого меньше размера картинки. У дива скруглены углы. Я предполагал что скругление углов у дива позволит скруглить углы видимой части картинки, но подобная техника работает только в Firefox, в Safari не смотря на то что у дива overflow:hidden; картинка перекрывает див по границам, и соответсвенно скругление углов не действует.

Учитывая то что картинка по размеру больше "окна для ее отображения" реализуемого дивом, скругление углов самой картинки ничего не дает.

Подскажите как быть, что делать.

.rounded-corners {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
}

.thumb {
position: absolute;
top: 0px;
left:250px;
float: left;
width: 180px;
height:150px;
margin:0;
overflow:hidden;
}

.thumb img {
float: left;
padding:0 0 0 0;
margin-top:0;
}

<div class="thumb rounded-corners"><img src="img.jpg" alt="" width="450" hight="450"></div>

[savva-paladin]

-webkit-background-clip должно помочь.
Ссылка на статью

[kosmos.ehp]

Описание проблемы очень похоже, но к сожалению к решению оно не привело. Результат тот же самый(.

Сообщение от savva-paladin

-webkit-background-clip должно помочь.
Ссылка на статью

[kosmos.ehp]

Пока, единственное решение которое нашел, это дедовский сопособ с картинками скругленных углов.

<div id="container">
<img src="images/fubar.jpg" alt="situation normal" />
<div class="rounded lt"></div>
<div class="rounded rt"></div>
<div class="rounded lb"></div>
<div class="rounded rb"></div>
</div>

#container {position:relative;}
#container img {z-index:0;}
.rounded {position:absolute; z-index:1; width:20px; height:20px;}
.lt {background:url('images/rounded_LT.png') left top no-repeat;}
.rt {background:url('images/rounded_RT.png') right top no-repeat;}
.lb {background:url('images/rounded_LB.png') left bottom no-repeat;}
.rb {background:url('images/rounded_RB.png') right bottom no-repeat;}

[savva-paladin]

так, а не пробовали <img> выводить как

.rounded-corners {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
background: url(img.jpg) no-repeat;
}/*Точно прокатит с хромом/сафари*/

[kosmos.ehp]

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

Размера дива потом анимируються при помощи jQuery, по этому картинку и нельзя сразу оборезать до рамера дива и в ней самой скруглить углы.

Сообщение от savva-paladin

так, а не пробовали <img> выводить как

.rounded-corners {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
background: url(img.jpg) no-repeat;
}/*Точно прокатит с хромом/сафари*/

[kosmos.ehp]

Ну и я забыл сказать, что картинки не статичны они подтягиваются из постов в Wordpress, по этому статичные картинки на бекграунде использовать не получается.

Сообщение от savva-paladin

так, а не пробовали <img> выводить как

.rounded-corners {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
background: url(img.jpg) no-repeat;
}/*Точно прокатит с хромом/сафари*/

[savva-paladin]

Тогда единственный способ

Сообщение от kosmos.ehp

это дедовский сопособ с картинками скругленных углов