w3docs logo

CSS свойство border-radius

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

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

Но можно использовать свойство border-radius для одновременного установления всех четырех углов. Свойство может иметь от одного до четырех значений.

Если установлены четыре значения, будут отображены границы top-left, top-right, bottom-right и bottom-left соответственно. Если bottom-left отсутствует, будет использовано то же значение, что и для top-right. Если отсутствует bottom-right, будет использовано то же значение, что и для top-left, а если установлено только одно значение, оно будет использовано в равной степени для всех четырех углов.

Разрешается использовать одно, две, три или четыре значения длины или процента. Используется, чтобы установить один радиус для углов. Также допустимо использовать значения через косую черту (/). Используется, чтобы установить дополнительный радиус для создания эллиптических углов.

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

Значение по умолчанию 0
Применяется Ко всем элементам, а также к ::first-letter .
Наследуется Нет
Анимируемое Да. Каждое собирательное свойство анимируемое.
Версия CSS3
DOM синтаксис object.style.borderRadius = "20px";

Синтаксис

border-radius: 1-4 length | 1-4 length (%) |  initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div {
      height: 40px;
      width: 50%;
      background: #ccc;
      border: 4px solid #1c87c9;
      border-radius: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Пример border-radius</h2>
    <div></div>
  </body>
</html>

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

Текущие Firefox версии поддерживают свойство border-radius без префикса -moz-.

Пример с префиксами -moz- и -webkit-, где использованы две разные значения для свойства border-radius (с процентом и пикселем):

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .radius-pixel {
      height: 40px;
      background: #ccc;
      border: 4px solid #1c87c9;
      border-radius: 12px;
      -webkit-border-radius: 12px;
      -moz-border-radius: 12px;
      }
      .radius-percent {
      width: 120px;
      height: 120px;
      margin-top: 20px;
      background: #ccc;
      border: 4px solid #1c87c9;
      border-radius: 50%;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <h2>Пример border-radius с -moz- and -webkit-</h2>
    <div class="radius-pixel"></div>
    <div class="radius-percent"></div>
  </body>
</html>

Можно также установить border-radius для элемента с background color илиbackground image.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .radius-bg {
      width: 250px;
      height: 200px;
      background: #ccc;
      border: 4px solid #1c87c9;
      border-radius: 12px;
      -webkit-border-radius: 12px;
      -moz-border-radius: 12px;
      }
      .radius-img {
      width: 250px;
      height: 200px;
      margin-top: 20px;
      background-img: lightgray;
      background: url('/uploads/media/default/0001/01/6ef5dc22756f45ab51d0c510ad0371191ec4ff04.jpeg');
      background-position: left top;
      background-repeat: repeat;
      border: 2px solid #1c87c9;
      border-radius: 25px;
      -webkit-border-radius: 25px;
      -moz-border-radius: 25px;
      }
    </style>
  </head>
  <body>
    <h2>Пример border-radius с background color</h2>
    <div class="radius-bg"></div>
    <h2> Пример border-radius с background image</h2>
    <div class="radius-img"></div>
  </body>
</html>

Рассмотрим пример, где есть разные блоки с разными значениями border-radius, которые и определяют формы блока:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div {
      width: 250px;
      height: 150px;
      border: solid 3px #1c87c9;
      background: #1c87c9;
      }
      .radius_1 {
      border-radius: 25px;
      -moz-border-radius: 25px;
      -webkit-border-radius: 25px;
      }
      .radius_2 {
      border-radius: 25% 10%;
      -moz-border-radius:  25% 10%;
      -webkit-border-radius:  25% 10%;
      }
      .radius_3 {
      border-radius: 10% 30% 50% 70%;
      -moz-border-radius: 10% 30% 50% 70%;
      -webkit-border-radius:  10% 30% 50% 70%;
      }
      .radius_4 {
      border-radius: 10% / 50%;
      -moz-border-radius:  10% / 50%;
      -webkit-border-radius: 10% / 50%;
      }
      .radius_5 {
      border-radius: 10px 100px / 120px;
      -moz-border-radius:  10px 100px / 120px;
      -webkit-border-radius:  10px 100px / 120px;
      }
      .radius_6 {
      border-radius: 25% 10%;
      -moz-border-radius:  25% 10%;
      -webkit-border-radius:  25% 10%;
      }
      .radius_7 {
      border-radius: 50% 20% / 10% 40%;
      -moz-border-radius:  50% 20% / 10% 40%;
      -webkit-border-radius:  50% 20% / 10% 40%;
      }
      .radius_8 {
      border-radius: 50%;
      -moz-border-radius:  50%;
      -webkit-border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <h2> Примеры с border-radius</h2>
    <div class="radius_1"></div>
    <br />
    <div class="radius_2"></div>
    <br />
    <div class="radius_3"></div>
    <br />
    <div class="radius_4"></div>
    <br />
    <div class="radius_5"></div>
    <br />
    <div class="radius_6"></div>
    <br />
    <div class="radius_7"></div>
    <br />
    <div class="radius_8"></div>
  </body>
</html>

Значения

Значение Описание
length Определяет форму углов.
% Определяет форму углов в процентах.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

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

chrome firefox safari opera
4+ 3+ 3.1+ 11.5+

Практикуйте свои знания

Что такое свойство border-radius в CSS?
Считаете ли это полезным?