Как читается border-radius
Четыре числа по часовой стрелке
border-radius: 12px 0 24px 8px — это верхний левый, верхний правый, нижний правый и нижний левый углы. Порядок фиксированный и начинается с левого верхнего. Если все одинаковые, пишут одно число.
Два числа и три числа
Сокращения тоже работают. Два числа — это «верхний левый с нижним правым» и «верхний правый с нижним левым». Три — верхний левый, потом пара по диагонали, потом нижний правый. На практике читабельнее писать или одно число, или все четыре.
Проценты — не то же самое, что пиксели
Процент считается отдельно по горизонтали и по вертикали. Поэтому 50% на квадрате даёт круг, а на прямоугольнике 320 × 200 — эллипс: по горизонтали радиус 160 пикселей, по вертикали 100. Пиксели такого не делают, они одинаковы в обе стороны.
Когда браузер уменьшает радиусы сам
Если два радиуса на одной стороне вместе длиннее самой стороны, браузер считает коэффициент и уменьшает на него все четыре угла, а не один. Из-за этого карточка с радиусом 200 при высоте 200 выглядит не так, как ожидали: форма остаётся пропорциональной, но числа уже не те, что написаны.
Капсула
Когда радиус доходит до половины короткой стороны, угол становится полукругом и дальше уже не меняется. Отсюда привычный трюк border-radius: 999px для кнопки-пилюли: любое слишком большое число даст тот же результат.
Частые вопросы о скруглении
Как сделать круглый аватар?
Квадратный элемент и border-radius: 50%. На неквадратном выйдет эллипс — сначала выровняйте стороны или добавьте aspect-ratio: 1.
Почему скругления не видно на картинке внутри?
Ребёнок не наследует форму родителя. Либо поставьте радиус самой картинке, либо добавьте родителю overflow: hidden.
999px или 50% для кнопки?
999px. Процент на широкой кнопке сделает углы эллиптическими и форма поплывёт; слишком большой пиксельный радиус браузер сам срежет до полукруга.
Можно ли разные радиусы по горизонтали и вертикали?
Да, через косую черту: border-radius: 40px / 20px — первое значение по горизонтали, второе по вертикали. Эта страница собирает простую запись без черты.
Скругление с рамкой и тенью
Обе повторяют форму автоматически: рамка идёт по скруглённому контуру, тень тоже. Ничего дополнительно синхронизировать не нужно.