В статье описаны особенности применения свойства border-radius. Также представлены проблемы в отображении для разных браузеров и предложены возможные варианты их решения.

С выходом новой версии CSS3 решилась одна из самых сложных проблем в веб-дизайне. В новой версии продукта появилось новое свойство border-radius, с помощью которого можно легко округлять углы блока там, где это необходимо. Теперь верстальщики могут забыть о трудоемких процессах реализации такого простого решения, как скругление углов через тот же photoshop.

Однако, как оказалось, не все браузеры были готовы к выходу новинки от CSS3. Некоторые из них не совсем корректно обрабатывают скругление, на лицо недоработки и промахи.

какого брокера выбрать.

Проблемы с webkit-браузерами

Проведя тестирование на разных браузерах мы обнаружили один не очень приятный эффект при отработки свойства в webkit-браузерах. Для наглядности рассмотрим, как выводит скругление Firefox и Chrome:

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

Ввиду этого необходимо расставить приоритеты при создании сайта. Либо следует отдать предпочтение простоте кода и быстрой загрузке веб страницы, что реализуется в случае использования border-radius, либо делаем уклон на красоту и аккуратность, что легко достигается при использовании бекграундных картинок.

Проблемы скруглений изображения

В браузерах в той же степени могут возникнуть проблемы с применением свойства скругления углов как непосредственно к самой картинке, так и к ее родителю. Чтобы было понятно, привожу пример кода:

CSS

#img p {
	width: 200px;
	height: 150px;
	margin-right: 20px;
	overflow: hidden;
	border: 1px solid #f00;
	border-radius: 20px;
          -moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	margin:0px auto;
}

Ожидали увидеть скругленную картинку с красной рамкой, а видим

Выход из ситуации

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

CSS

#img p {
	width: 200px;
	height: 150px;
	margin-right: 20px;
	overflow: hidden;
	border: 1px solid #f00;
	border-radius: 20px;
          -moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	margin:0px auto;
}
#img  img  {
	border-radius: 19px;
          -moz-border-radius: 19px;
	-webkit-border-radius: 19px;
}

Обращаю Ваше внимание на то, что содержимое блока требуется скруглять на 1 пиксель меньше, чтобы достичь полного единства рамки родителя и скругления потомка.

Еще одно решение

Второй способ, который, как показывает практика, является более действенным, заключается в помещении картинки на задний фон. То есть картинку мы будем выводить не посредством HTML-кода, а через CSS-правила, воспользовавшись свойством background. Однако следует отметить тот факт, что такой способ является хуже с точки зрения семантики, однако при отсутствии других более лучших вариантов выхода у нас нет.

Итак, вот код этого решения:

CSS

width: 200px;
	height: 150px;
	margin-right: 20px;
	overflow: hidden;
	border: 1px solid #f00;
	border-radius: 20px;
          -moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	margin:0px auto;
	background: url(img3.jpg) no-repeat;

Теперь убедимся, что наш способ работает, пропускаем код через браузер

В каких браузерах работает?

Итог

Стоит отметить, что выход нового свойства в CSS3 значительно облегчил работу многим программистам. Однако, некоторые браузеры технически не были готовы к такому новшеству. Это выразилось в том, что одни из них некорректно осуществляли скругления, а другие не могли синхронизировать эффект между родителями и потомками. Но несмотря на это, с выходом новых версий браузеров постепенно разработчики исправили все свои недочеты, за что им отдельно спасибо. Сейчас в работе с border-radius не возникает практически никаких проблем.