border-radius
Скругляет углы элемента.
Синтаксис
border-radius: value;Значения
| Параметр | Тип | Описание |
|---|---|---|
| length | length | Радиус скругления: `8px`. |
| 50% | percentage | У квадратного элемента — круг. |
| four values | length | Углы по часовой стрелке от левого верхнего: `10px 0 10px 0`. |
Примеры
Скруглённые углы, круг и лист:
<style>
div { width: 80px; height: 80px; background: coral; display: inline-block; margin: 4px; }
</style>
<div style="border-radius: 8px;"></div>
<div style="border-radius: 50%;"></div>
<div style="border-radius: 40px 0;"></div>Круглая аватарка:
<img src="/media/photo-200x200.jpg" alt="Avatar" width="80" height="80" style="border-radius: 50%;">Примечания
Фон и рамка повторяют скругление, но дочерние элементы могут вылезать за углы — добавьте родителю overflow: hidden, чтобы их обрезать.
См. также
- border — Рамка вокруг элемента: толщина, стиль и цвет в одном свойстве.
- overflow — Что делать с содержимым, которое не помещается в элемент.
- box-shadow — Тень вокруг блока элемента.
Вопросы и ответы по теме
В учебнике
- Фон и рамки — Фоновые картинки, их повтор, размер и положение, виды рамок, скругление углов и outline.