Учим Opera скруглять img

Проблема

Opera упорно игнорирует все попытки скруглить img с помощью border-radius.

Подробнее об этом неудобном моменте можно почитать в статье Проблемы с border-radius. Там же предлагается обходное решение — использовать вместо img какой-либо «подставной» элемент с заданным background (его Opera скруглит нормально).

Но не все так плохо. По крайней мере для однородного фона проблема решена — Оперу можно «уговорить» с минимальными потерями.

Решение

Пусть в HTML задан какой-нибудь рисунок:

<img src="pic200x200.jpg" width="200" height="200" alt=""/>

Колдуем в стилях:

img {
	border-radius: 100px;
	position: relative;
}
img:before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 150px;
	display:block;
	margin: -50px;
	border: 50px solid #fff;
}

Суть фокуса — в псевдоэлементе :before. Он, кстати, нужен исключительно для Оперы (и сработает для img, судя по всему? только в ней). В остальных браузерах (кроме IE все и так будет нормально).

Приведенный выше код, к сожалению, не вполне универсален. Во-первых, он годится, как уже было сказано, только для однородного фона, во-вторых, рассчитан на скругление рисунка вполне определенных размеров. Поэтому, он идеально подходит, скажем, для случая округлых аватарок. У них, как правило, фиксированный размер.

Если нужно скруглять рисунок другого размера или использовать другой радиус скругления придется немного поиграться с числовыми параметрами:

img {
	border-radius: 100px;
}
img:before {
	border-radius: 150px;
	margin: -50px;
	border: 50px solid #fff;
}

Ослы и border-radius

И, да, конечно, IE традиционно не понимают border-radius. Можно воспользоваться скриптом PIE.

Демо-пример.

Проверено в:

• IE 7-8
• Firefox 7
• Opera 11.5
• Safari
• Chrome

Материал:

• Border radius rounded images and avatars.

По теме:

• Скругление углов. Обзор методов.