Энциклопедия CSS: border-radius

CSS: border-radius

Тематические порталы

Портал CSS • Портал Веб-разработчиков

border-radius — CSS-свойство, которое задаёт скругление углов элемента.

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

Синтаксис

selector {
  border-radius: значение;
}

Пример:

.box {
  border-radius: 8px;
}

В этом случае все четыре угла элемента будут скруглены на 8 пикселей.

Варианты записи

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

.box-1 {
  border-radius: 10px;             /* все углы */
}

.box-2 {
  border-radius: 10px 20px;        /* верхний левый/нижний правый, верхний правый/нижний левый */
}

.box-3 {
  border-radius: 10px 20px 30px;   /* верхний левый, верхний правый/нижний левый, нижний правый */
}

.box-4 {
  border-radius: 10px 20px 30px 40px; /* верхний левый, верхний правый, нижний правый, нижний левый */
}

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

Скругление отдельных углов

Для каждого угла есть отдельное свойство:

• border-top-left-radius — верхний левый угол;
• border-top-right-radius — верхний правый угол;
• border-bottom-right-radius — нижний правый угол;
• border-bottom-left-radius — нижний левый угол.

Пример:

.box {
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

Круг и овал

Если у квадратного элемента указать border-radius: 50%;, получится круг:

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

Если ширина и высота отличаются, элемент станет овальным.

Живой пример

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

HTMLКопировать

<div class="radius-demo"> <div class="box radius-small">border-radius: 6px;</div> <div class="box radius-large">border-radius: 20px;</div> <div class="box radius-mixed">border-radius: 20px 6px 20px 6px;</div> <div class="circle">50%</div> </div>

CSSКопировать

.radius-demo { font-family: Arial, sans-serif; background: #f7f9fc; border: 1px solid #d6e0ea; padding: 18px; } .radius-demo .box { margin-bottom: 14px; padding: 14px 16px; background: #ffffff; border: 2px solid #3b82f6; color: #1f2937; font-weight: 600; } .radius-demo .radius-small { border-radius: 6px; } .radius-demo .radius-large { border-radius: 20px; } .radius-demo .radius-mixed { border-radius: 20px 6px 20px 6px; } .radius-demo .circle { width: 90px; height: 90px; border-radius: 50%; background: #22c55e; color: #ffffff; display: flex; align-items: center; justify-content: center; font-weight: 700; }

РезультатСкачать файлом

Связь с border

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

.button {
  border: 1px solid #3b82f6;
  border-radius: 6px;
}

Скругление также заметно на фоне элемента, даже если граница не задана:

.card {
  background-color: #f3f4f6;
  border-radius: 12px;
}

Источники

• MDN Web Docs: border-radius
• W3C: CSS Backgrounds and Borders Module Level 3