W3docs
ru
Войти

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

Свойство border-radius скругляет углы внешней границы элемента. Примеры и объяснение синтаксиса.

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

Свойство border-radius является одним из свойств CSS3.

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

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

Свойство border-radius задаётся следующим образом:

  1. одно, два, три или четыре значения длины или процента, задающие единый радиус для углов;
  2. необязательно — косая черта ( / ) и одно, два, три или четыре значения длины или процента. Это позволяет задать дополнительный радиус и создать эллиптические углы.

Первый набор значений (1–4) задаёт горизонтальный радиус для всех четырёх углов. Необязательный второй набор значений, предваряемый косой чертой, задаёт вертикальные радиусы для всех четырёх углов. Если указан только один набор значений, он используется как для вертикального, так и для горизонтального радиусов.

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

Начальное значение0
Применяется кВсем элементам. Также применяется к ::first-letter.
НаследованиеНет
АнимируемостьДа. Каждое из свойств сокращения поддерживает анимацию.
ВерсияCSS3
Синтаксис DOMobject.style.borderRadius = "20px"; (Примечание: JavaScript использует camelCase borderRadius, в отличие от дефисного имени CSS-свойства.)

Синтаксис

Синтаксис свойства CSS border-radius

border-radius: <length> | <percentage> [ / <length> | <percentage> ]? | initial | inherit;

Пример свойства border-radius:

Пример свойства CSS border-radius

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        height: 40px;
        width: 50%;
        background: #ccc;
        border: 4px solid #1c87c9;
        border-radius: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Border-radius example</h2>
    <div></div>
  </body>
</html>
Попробуйте сами »

Результат

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

Посмотрите пример с процентными и пиксельными значениями:

Пример свойства border-radius с процентными и пиксельными значениями:

Пример свойства CSS border-radius с процентными и пиксельными значениями

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .radius-pixel {
        height: 40px;
        background: #ccc;
        border: 4px solid #1c87c9;
        border-radius: 12px;
      }
      .radius-percent {
        width: 120px;
        height: 120px;
        margin-top: 20px;
        background: #ccc;
        border: 4px solid #1c87c9;
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <h2>Border-radius example with percent and pixel values</h2>
    <div class="radius-pixel"></div>
    <div class="radius-percent"></div>
  </body>
</html>
Попробуйте сами »

Значение в пикселях даёт одинаковый фиксированный радиус угла вне зависимости от изменения размеров элемента — именно это обычно нужно для кнопок, карточек и полей ввода. Процентное значение масштабируется вместе с элементом, поэтому border-radius: 50% на квадратном элементе образует круг — распространённый приём для аватаров и значков.

Также можно задать border-radius для элемента с цветом фона или фоновым изображением.

Пример свойства border-radius со свойствами background-color и background-image:

Пример свойства CSS border-radius со свойствами цвета фона и фонового изображения

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .radius-bg {
        width: 250px;
        height: 200px;
        background: #ccc;
        border: 4px solid #1c87c9;
        border-radius: 12px;
      }
      .radius-img {
        width: 250px;
        height: 200px;
        margin-top: 20px;
        background-color: lightgray;
        background: url('https://api.w3docs.com/uploads/media/default/0001/01/6ef5dc22756f45ab51d0c510ad0371191ec4ff04.jpeg');
        background-position: left top;
        background-repeat: repeat;
        border: 2px solid #1c87c9;
        border-radius: 25px;
      }
    </style>
  </head>
  <body>
    <h1> Border-radius example with background color</h1>
    <div class="radius-bg"></div>
    <h2> Border-radius example with background image</h2>
    <div class="radius-img"></div>
  </body>
</html>
Попробуйте сами »

Примечание: в старых браузерах фоновые изображения могут не обрезаться по скруглённым углам. Используйте background-clip: border-box; для обеспечения единообразного поведения.

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

Пример свойства border-radius с несколькими значениями:

Пример свойства CSS border-radius с различными значениями (%, px)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 250px;
        height: 150px;
        border: solid 3px #1c87c9;
        background: #1c87c9;
      }
      .radius_1 {
        border-radius: 25px;
      }
      .radius_2 {
        border-radius: 25% 10%;
      }
      .radius_3 {
        border-radius: 10% 30% 50% 70%;
      }
      .radius_4 {
        border-radius: 10% / 50%;
      }
      .radius_5 {
        border-radius: 10px 100px / 120px;
      }
      .radius_6 {
        border-radius: 25% 10%;
      }
      .radius_7 {
        border-radius: 50% 20% / 10% 40%;
      }
      .radius_8 {
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <h1> Border-radius examples</h1>
    <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>
Попробуйте сами »

Синтаксис с косой чертой (например, border-radius: 10px 100px / 120px) разделяет горизонтальные и вертикальные радиусы — именно так создаются асимметричные эллиптические углы вместо простых четвертей окружности.

Распространённые случаи применения

  • Скруглённые кнопки и карточки: небольшое фиксированное значение, например border-radius: 6px, смягчает углы, не искажая форму.
  • Кнопки-«таблетки»: большое значение, например border-radius: 9999px, полностью скругляет короткие стороны, превращая элемент в капсулу.
  • Круги и аватары: border-radius: 50% на квадратном элементе (равные ширина и высота) создаёт идеальный круг.
  • Декоративные фигуры: четыре разных процентных значения, при необходимости с синтаксисом /, позволяют создавать органические, листовидные формы.

Значения

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

Практика

Практика
Что делает CSS-свойство 'border-radius'?
Что делает CSS-свойство 'border-radius'?
Was this page helpful?