skip to main content

border-radius

css

Кратко 🔗

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

🔮 Волшебное свойство! Часто нужно в работе, поскольку дизайнеры не любят острые углы.

Пример 🔗

Самая простая штука — кнопка с закруглёнными краями:

HTML

<button class="btn">Купить</button>

CSS

.btn {
border: none;
border-radius: 5px;
}

Обрати внимание, что мы сбросили стандартную рамку кнопки, но углы тем не менее слегка закруглились.

Если при нажатии добавлять кнопке внутреннюю тень такого же цвета, что и фон, она будет "нажиматься" — получится привлекательно и современно 😉

body {
background-color: #e6e6e6;
}

.btn:focus {
box-shadow: inset 0px 0 0px 3px #e6e6e6;
transition: all 0.2s;
}

Как это понять 🔗

Слово border переводится с английского как рамка. А со словом radius каждый знаком ещё со школьной скамьи 😏

Свойство border-radius задаёт радиус закругления каждого из углов элемента.

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

Как пишется 🔗

Пройдемся по синтаксису:

selector {
border-radius: 5px; /* радиус в пикселях */
border-radius: 50%; /* радиус в процентах */
border-radius: 5px 0 0 50%; /* разные радиусы для каждого из четырёх углов элемента */
}

Можно управлять степенью закругления каждого из углов в отдельности или задать одно значение для всех углов сразу. Причём значение на самом деле состоит из двух — скругления по горизонтальной оси и по вертикальной. Чтобы явно задать скругление для каждой из осей (т. е. получить не круглое значение, а элипсоидное), это значение следует записывать через символ /:

.ellipse {
border-radius: 5em / 50%;
}

Такая запись совсем не означает, что наше скругление будет равно результату деления 5em на какой-то размер, а эквивалентна такой записи:

.ellipse {
border-top-left-radius: 5em 50%;
border-top-right-radius: 5em 50%;
border-bottom-right-radius: 5em 50%;
border-bottom-left-radius: 5em 50%;
}

See the Pen border-radius by Roman Ganin (@Realetive) on CodePen.

Подсказки 🔗

💡 Значение по умолчанию: 0.

💡 border-radius сработает даже если не будет задана видимая рамка.

💡 Чтобы увидеть результат работы свойства, надо задать фоновую заливку или картинку блоку, к которому применяется закругление углов. Или рамку, или фон для родительского элемента. Что-то, что отделит белое от белого 🤗

💡 Можно управлять радиусом закругления каждого угла в отдельности при помощи свойств:

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

В работе 🔗

Алёна,

🛠 Самый крутой лайфхак — это круглые элементы при помощи border-radius. Они часто нужны для всяких лейблов на странице.

HTML

<button class="icon" data-notifications="3"></button>

CSS

.icon {
background-image: url(eyes.png);
}

.icon:after {
content: attr(data-notifications);
width: 25px; /* равные ширина */
height: 25px; /* и высота */
border-radius: 50%; /* закругляем углы на 50% */
color: #ffffff;
background-color: #ed4242;
}

Роман,

🛠 Если вы не уверены, что блок всегда будет квадратным, то для подстраховки можно указывать закругление в абсолютных единицах. Причём указать значение, бо́льшее чем максимальная ширина и высота блока. Например, border-radius: 9999px. Если в этой ситуации указывать закругление в процентах, то значение будет считаться от ширины и высоты. Что приведёт к вытягиванию блока в яйцо:

See the Pen border-radius by Roman Ganin (@Realetive) on CodePen.

Автор: Алёна,