border-radius скругляет углы элемента - от лёгкого смягчения острых углов кнопки до идеального круга. Одно значение (например border-radius: 12px) скругляет сразу все четыре угла одинаково, а border-radius: 50% на квадратном элементе превращает его в идеальный круг.
В этом уроке
Попробуй прямо сейчас: замени border-radius на 50% - при таких width и height (не квадрат) получится не круг, а овал.
Как задать border-radius: одно значение и порядок углов в shorthand
Одно значение (border-radius: 12px) скругляет все четыре угла одинаково. Можно задать до четырёх значений через пробел - тогда они идут по часовой стрелке начиная с верхнего левого угла: top-left, top-right, bottom-right, bottom-left - тот же порядок обхода, что уже встречался в уроках про padding и margin. По умолчанию border-radius равен 0 - углы острые, пока не задано иначе. Скруглённый угол буквально "вырезается" из блочной модели, которую разбирали в уроке про блочную модель - скругляется именно внешний контур border, а не содержимое.
border-radius: 10px; - все четыре угла скруглены одинаково на 10px.
border-radius: 5px 15px 25px 35px;, ожидая скругления против часовой стрелки - реальный порядок именно по часовой: сначала верхний левый, потом верхний правый, нижний правый, нижний левый.
Как сделать круг или пилюлю с помощью border-radius
border-radius: 50% превращает элемент в идеальный круг, но только если у него равные width и height (квадрат) - тогда горизонтальный и вертикальный радиус угла совпадают. На прямоугольнике 50% даёт не круг, а овал, потому что радиус считается отдельно от ширины и отдельно от высоты. Для "пилюли" (кнопки с полностью скруглёнными короткими сторонами, но без превращения в овал) вместо 50% используют заведомо большое абсолютное значение вроде 9999px - браузер не может скруглить угол больше, чем позволяет половина меньшей стороны, поэтому фигура просто останавливается на форме пилюли.
width: 80px; height: 80px; border-radius: 50%; - идеальный круг, стороны равны.
width: 200px; height: 80px; border-radius: 50%;, ожидая круг - получится овал, потому что стороны разной длины.
Почему border-radius не скругляет дочерний элемент без overflow: hidden
border-radius скругляет только внешнюю границу самого элемента - он не обрезает автоматически то, что лежит внутри. Если внутри скруглённого блока находится дочерний элемент (например картинка), который заполняет его целиком, острые углы этой картинки будут выступать за скруглённые углы родителя. Чтобы дочерний элемент реально обрезался по скруглённой форме, на родителе дополнительно нужен overflow: hidden.
.card { border-radius: 16px; overflow: hidden; } - картинка внутри .card обрежется точно по скруглённой форме.
.card { border-radius: 16px; } без overflow: hidden - у самого блока углы скруглены, но острые углы картинки внутри всё равно видны поверх скругления.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Ставят border-radius: 50% на прямоугольный (не квадратный) блок, ожидая круг | Получается овал - радиус считается отдельно по ширине и по высоте | Для круга сделать width и height равными, для пилюли использовать большое px-значение |
| Перечисляют 4 значения shorthand в произвольном порядке | Радиусы попадают не на те углы, которые задумывались | Помнить порядок по часовой стрелке: верхний левый, верхний правый, нижний правый, нижний левый |
| Ждут, что border-radius сам обрежет содержимое блока | Дочерний элемент (картинка) выступает острыми углами за скруглённую рамку | Добавить overflow: hidden на тот же элемент, где задан border-radius |
| Задают отрицательное значение border-radius | Значение невалидно и игнорируется браузером | Использовать только 0 или положительные значения |
Шпаргалка
| Что нужно | Как сделать |
|---|---|
| Скруглить все углы одинаково | border-radius: 12px; |
| Разные углы (по часовой стрелке) | border-radius: верх-лево верх-право низ-право низ-лево; |
| Идеальный круг | width и height равны + border-radius: 50%; |
| Пилюля (без превращения в овал) | border-radius: 9999px; (или любое большое значение) |
| Обрезать содержимое по скруглению | overflow: hidden; на том же элементе |
| Без скругления (по умолчанию) | border-radius: 0; |
Коротко: отвечаем на вопросы
border-radius: 50% всегда даёт идеальный круг?
Нет, только если у элемента равны width и height (квадрат). На прямоугольном элементе border-radius: 50% даёт овал, а не круг, потому что горизонтальный и вертикальный радиус угла считаются отдельно друг от друга - каждый как 50% от своей стороны.
Почему border-radius не скругляет картинку внутри блока?
border-radius скругляет только границу самого элемента, на котором он задан, а не автоматически обрезает то, что лежит внутри. Если картинка заполняет блок целиком, её собственные острые углы будут выступать за скруглённую рамку родителя. Чтобы содержимое обрезалось точно по скруглённой форме, на родителе дополнительно нужен overflow: hidden.
