Как сделать в css закругление углов

Приветствую вас на страницах этого сайта. Мой блог в основном посвящен технологиям html и css, с помощью которых можно создавать шаблоны сайтов. Очень часто при разработке необходимо скруглить один или несколько углов у нужного элемента. Раньше это сделали при помощи вставки соответствующего изображения, но сегодня в css закругление углов сделать намного проще. Давайте смотреть как.

Закругление углов у блочных элементов

По умолчанию блок имеет прямые углы. Не всегда это нужно по дизайну – закругленными часто делают кнопки, пункты меню и даже общие контейнеры. И все благодаря новому свойству – border-radius. До его появления закругление нельзя было сделать средствами css.

Я опять буду показывать его работу на примере обычного желтого блока. Для простоты мой элемент будет квадратным – 150 на 150 пикселей. Я задам блоку такой стиль:

Давайте посмотрим, как изменился его внешний вид. Теперь видно, что углы немного скруглены. При желании можно увеличить скругление. Методом экспериментов можно легко добиться нужного вам внешнего вида.

Для элемента 150 на 150 это уже значительное скругление, так что он значительно преобразился от своего изначального вида.

Как сделать из квадрата идеальный круг

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

Сработает только в том случае, если у элемента одинаковая ширина и высота. Если же размеры разные, то элемент приобретет овальную форму.

Закругление для каждого угла отдельно

Css дает еще одну замечательную возможность – задать скругление с каждой стороны отдельно. Это можно сделать двумя способами:
1. Использовать свойства border-top-left-radius, border-bottom-left-radius, border-bottom-right-radius и border-top-right-radius. Иногда ими можно воспользоваться, но более удобным является второй вариант.
2. Этот способ заключается в том, чтобы задавать закругление с помощью свойства border-radius, записав сразу четыре значения через пробел – для верхнего левого, верхнего правого, нижнего левого и нижнего правого углов. Именно в такой последовательности – это важно.

А ну-ка давайте попробуем:

Таким образом, закруглились только верхние углы. Если бы мы наоборот оставили первые два значения нулевыми, а третье и четвертое задали бы, то закругление появилось бы у нижних углов. Записать можно и так:

В этом случае первое значение задает закругление для левого верхнего и правого нижнего углов, а второе – правого верхнего и левого нижнего. Вот такая интересная логика.

Расширенные возможности

На самом деле значения можно записывать через слеш. По умолчанию border-radius закругляет углы только по одной оси, а еще есть возможность делать это по другой. Давайте запишем так:

И вот так мило преобразился блок в результате этих действий.

Соответственно, в этом случае действует также прописывание для каждой стороны отдельно.

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

У меня есть только одно предупреждение: если вы попробуете записать что-то вроде этого:

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

Итак, это вся информация, которую я вам хотел сегодня рассказать про скругление углов. Еще хотелось бы отметить, что свойство появилось в версии CSS 3. Соответственно, в старых браузерах оно не поддерживается. Internet Explorer поддерживает свойство с десятой версии.

Чтобы обеспечить больше кроссбраузерности используйте также вендорные префиксы -webkit и -moz, чтобы старые версии iOS и Mozilla могли обработать это свойство. Вообще о вендорных префиксах читайте подробнее здесь.

Что ж, сегодня мы разобрали, как делать в css скругление углов. Надеюсь, информация была для вас полезной.