Закругленные углы с помощью радиуса округления границ рамки CSS3

До появления CSS3, чтобы добавить к таким элементам веб-страницы, как формы или кнопки, закругленные углы, нужно было использовать ряд изображений и много дополнительной разметки. К счастью, теперь закругленные углы CSS позволяет создавать очень просто. В том числе это можно сделать с помощью свойства border-radius.

Вы можете использовать это свойство CSS3 для следующих браузеров:

  • Chrome 6+;
  • Firefox 4+;
  • Safari 5 +;
  • IE9 +;
  • Opera 10.5+;
  • Android 2.1+;
  • iOS 3.1+.

Радиус округления углов рамки в CSS

Мы будем работать с классом «info-box«. Это может быть область вашей веб-страницы с контактной информацией, и вы хотите с помощью CSS закруглить углы.

Напишите HTML-код элемента, для которого вы хотите закруглить углы:

<div class="info-box">Здесь будет какой-то контент</div>

Далее добавьте в таблицу стилей правило CSS:

.info-box {
   -webkit-border-radius: 20px;
   border-radius: 20px;
  background-color: #000000;
{

Примечания:

Мы добавили как вендорную версию свойства, так и обычную. Мы также добавляем цвет фона. Чтобы радиус округления углов рамки отображался должным образом, фон элемента должен отличаться от фона области, в которой размещается элемент. Иначе нужно будет добавить стили, ширину и цвет рамки.

Перед тем, как сделать закругленные углы CSS, нужно отметить, что в приведенном примере все четыре угла рамки будут иметь один и тот же радиус (20 пикселей).

Неодинаковые углы

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

.info-box {
   -webkit-border-radius: 20px 60px 40px 30px;
   border-radius: 20px 60px 40px 30px;
  background-color: #000000;
{

Как создать круг

Еще один эффект, который вы можете создать с помощью этого свойства, это круглые изображения. Если у вас есть изображение, которое имеет идеальную квадратную форму, то можно с помощью CSS закруглить углы картинки, и тогда рамка «обрежет» края изображения и создаст идеальный круг.

Допустим, что у вас в HTML-разметке есть квадратное изображение, которое имеет класс «bio-pic«. Вы можете сделать это изображение круглым с помощью следующего CSS-кода:

img.bio-pic {
   -webkit-border-radius: 50%;
   border-radius: 50%;
{

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

Перевод статьи «Rounded Corners with CSS3 Border Radius» был подготовлен дружной командой проекта Сайтостроение от А до Я.