CSS-свойство border-radius устанавливает закругленную форму для углов границ элемента. Это короткое свойство для свойстваr border-top-left-radius, border-top-right-radius, border-bottom-right-radius, и border-bottom-left-radius.

Значение по умолчанию: 0
Применяется к: Все элементы
Наследование: Нет
Анимирование: Да. Анимируемые свойства
Версия: Новый в CSS3

Свойство border-radius также приводит к тому, что фон элемента округляется, даже если границы не определены или для его значения установлено значение none.

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

border-radius: [length | percentage ] 1 to 4 values | initial | inherit

Эта сокращенная запись может принимать одно, два, три или четыре значения, разделенных пробелами.

  • Если указано одно значение, оно определяет радиус всех углов.
  • Если указано два значения, первое значение используется для верхнего левого и нижнего правого углов, а второе значение используется для верхнего правого и нижнего левого углов.
  • Если указано три значения, первое значение используется для верхнего левого угла, второе значение используется для верхнего правого и нижнего левого углов, а третье значение используется для нижнего правого угла.
  • Если указано четыре значения, каждое значение применяется к границе отдельно в следующем порядке: верхний левый, верхний правый, нижний правый и нижний левый угол.

Примеры написания кода свойства border-radius:

div {
    border: 2px solid #f08080;
    border-radius: 20px;
}

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

Значения свойств

В следующей таблице описаны значения этого свойства.

Значение Описание
length Значение длины в px, pt, cm, em и т. д. Отрицательные значения недопустимы.
percentage Размер радиуса в процентах. В случае двух значений процент для первого значения (горизонтального радиуса) вычисляется относительно ширины поля элемента, а процент для второго значения (вертикального радиуса) рассчитывается относительно высоты поля элемента. Отрицательные значения не допускаются.
initial Устанавливает это свойство в значение по умолчанию.
inherit Если указан, связанный элемент принимает вычисленное значение свойства его родительского элемента border-radius.

Поддержка браузеров

Свойство border-radius поддерживается во всех основных браузерах.

Internet Explorer 8 и более ранние версии не поддерживают CSS-свойство border-radius. Поддерживается в IE9 и выше.

Читайте также

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.