CSS-свойство border-radius - это настоящий «маг» для дизайна, который позволяет превратить строгие прямоугольные углы элемента в плавные и элегантные дуги. Технически речь идет о радиусе воображаемой окружности, где значение определяет расстояние от центра до края. В результате браузер рисует не острую вершину, а аккуратную кривую, что сразу делает интерфейс более дружелюбным:

Здесь открываются интересные возможности: свойство принимает от одного до четырех значений, разделенных пробелами. Количество указанных параметров напрямую диктует порядок применения скруглений. Если вы зададите несколько значений, процесс начнется с верхнего левого угла и пойдет по кругу:

Но на этом фантазия не заканчивается! Свойство позволяет создавать даже эллиптические углы. Для этого используется особая комбинация из двух чисел, разделенных символом прямого слэша, например: border-radius: 50px/30px;. Первое число отвечает за радиус от центра до левого или правого края, а второе - до верхнего или нижнего:

Логика работы с эллипсом немного отличается от стандартной окружности и требует внимательности:

Первое значение радиуса задается один раз и автоматически распространяется на все последующие параметры, что упрощает кодирование:

Важно помнить: закругленные углы - это лишь визуальная иллюзия. Браузер меняет отрисовку, но логика потока контента остается прежней, поэтому текст или изображения могут «вылезти» за пределы этих красивых дуг.

Примечание: Отличная новость для разработчиков: устанавливать рамку (border) заранее совершенно не обязательно. Если рамки нет, браузер с удовольствием скруглит углы фоновой области элемента!