От одного значения к восьми
border-radius: 12px; /* все четыре угла */
border-radius: 12px 4px; /* ЛВ+ПН, затем ПВ+ЛН */
border-radius: 12px 4px 8px; /* ЛВ, ПВ+ЛН, ПН */
border-radius: 12px 4px 8px 0; /* ЛВ, ПВ, ПН, ЛН — по часовой */
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; /* горизонталь / вертикаль */
Форма из четырёх значений всегда идёт по часовой стрелке от левого верхнего угла. Форму из восьми большинство так и не осваивает — а это единственный способ получить асимметричную органическую фигуру на чистом CSS.
Приём с «таблеткой»
Для кнопки, у которой торцы должны быть полностью скруглены при любой высоте:
border-radius: 9999px;
Браузер ограничит радиус половиной короткой стороны, поэтому это работает на любом размере без всяких замеров.
Когда скругление перестаёт помогать
- На секции во всю ширину. Скруглённые углы у блока, касающегося обоих краёв экрана, читаются как ошибка отрисовки.
- На вложенных элементах с тем же радиусом. Внутреннему элементу нужен меньший радиус, иначе зазор выглядит неровным. Правило простое: внутренний радиус = внешний минус внутренний отступ.
- Больше примерно 24 px на мелких элементах. Форма перестаёт читаться как прямоугольник и начинает выглядеть случайной.
Живьём и локально
Превью — настоящий элемент с вашим объявлением. Всё вычисляется в браузере, ничего не передаётся.
Вопросы
Что означает слэш в border-radius?+
Он отделяет горизонтальные радиусы от вертикальных. `border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%` задаёт каждому углу свой горизонтальный и вертикальный радиус — восемь значений всего. Именно неравные пары превращают скруглённый прямоугольник в «каплю».
Пиксели или проценты?+
Пиксели не меняются при росте элемента — это то, что нужно карточкам и кнопкам. Проценты масштабируются вместе с блоком — это нужно «таблеткам», кругам и органическим формам. Процентный радиус на широком элементе даёт эллипс, а не круг.
Как сделать идеальный круг?+
`border-radius: 50%` на элементе с одинаковыми шириной и высотой. При разных сторонах получится эллипс — и это правильное поведение, а не ошибка.
Что если радиусы больше самого элемента?+
Браузер пропорционально уменьшает их все, чтобы они поместились. Это поведение описано в спецификации, поэтому `border-radius: 9999px` — безопасный способ сказать «полностью скруглённые торцы», не зная высоты.