Как скруглить рамку. CSS-свойство border-radius

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

Как использовать border-radius

Чтобы скруглить рамку, нужно указать в border-radius одно, два, три или четыре значения.

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

.element {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: lightgreen;
}

Пропишете два значения — первое применится к левому верхнему и правому нижнему углу, а второе — к правому верхнему и левому нижнему:

.element {
  width: 200px;
  height: 200px;
  border-radius: 150px 10px;
  background-color: khaki;
}

Укажете три значения — первое применится к левому верхнему углу, второе — к правому верхнему и левому нижнему, третье — к правому нижнему:

.element {
  width: 200px;
  height: 200px;
  border-radius: 40px 20px 180px;
  background-color: lightblue;
}

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

.element {
  width: 300px;
  height: 100px;
  border-radius: 20px 20px 150px 150px;
  background-color: plum;
}

Как скруглить один угол

Чтобы скруглить только один угол, используйте свойства:

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

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

.element { 
  width: 300px;
  height: 150px;
  border-top-right-radius: 90px;
  border-bottom-left-radius: 80px;
  background-color: Lavender;
}

Сочетание с другими CSS-свойствами

border-radius легко комбинировать с другими свойствами CSS. Например, создадим стандартную карточку товара — добавим элементу скругления, фон и тень:

.element { 
  width: 300px;
  height: 150px;
  border-radius: 15px;
  background-color: Snow;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

Альтернативные методы

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

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