Хочу поделиться крошечным «тайным знанием» вдогонку к недавнему хабратопику о скруглении картинок средствами CSS3.

Все знают, что в Опере border-radius не работает для тега img. Даже обертка с overflow:hidden не спасает — углы предательски торчат из нее наружу. Чего только не придумано для борьбы с этим багом. Например, перекрыть эти выступающие углы border-ом псевдоэлемента :before обертки. Наш хабраколлега еще больше приблизился к идеалу, показав, что обертка не нужна (заодно еще раз раскрыв мощь CSS3). Но у таких решений есть существенное ограничение: картинки должны быть на однотонном фоне, иначе «покрышка» сразу выдаст себя.

Но есть у Оперы одна малоизвестная особенность, которая поможет нам решить эту проблему. Предлагаю вашему вниманию пример (сразу с кодом — его очень мало — и результатом): jsfiddle.net/XVtMh/147/.