Скругление углов у картинок во всех браузерах

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

Камнем предкновения стала Opera и скругление углов у тега img.

Однажды передо мной поставили подобную задачу и вот как я ее решил.

Нам понадобится контейнер для изображения и, собственно, само изображение в img:

<div class="image"><img src="yellowfon.png" alt="" /> </div>

Теперь это все оформляем.

Для вебкитных браузеров и ФФ с недавних пор достаточно задать радиус только тегу. Но старые версии нуждались в обертке. Делаем ее:
.image{
border-radius:15px;
}
Скругляем само изображение:
img{
display:block;
border-radius:15px;
position:relative;
width:700px;
}
Весь фокус для Оперы заключается в самой Опере. Это единственный браузер, который поддерживает псевдоэлементы у тега img.
img:after{
position:absolute;
top:0;
left:0;
content:'';
width:100%;
height:100%;
box-shadow:0 0 25px 0px #222, 0 0 0 1px #000, 0 0 0 6px #fff;/*первая тень задает черную рамку вокруг изображения, вторая скрывает углы*/
border-radius:15px;
}


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

Что имеем в результате:

Из плюсов:
1) можно вставлять любую картинку, без\с указанием размеров — она скруглится
2) не надо использовать бэграунд
3) все чисто с точки зрения семантики
Из минусов:
1) нельзя использовать на неоднорном фоне
2)…?

Пример работы находится здесь
Поковырять код можно здесь