Свойство border-radius задаёт радиус воображаемого круга в углу элемента – это расстояние от центра окружности до её края. Благодаря этому угол рисуется по дуге, а не остаётся прямолинейным.

В свойстве можно указать от одного до четырёх значений, разделённых пробелами. Чем больше значений, тем точнее вы определяете скругления; если их несколько, то первый радиус применяется к верхнему левому углу, а остальные – по порядку.

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

Установка эллиптических скруглений отличается от круглых. Первый радиус задаётся один раз и автоматически распространяется на все последующие значения, создавая плавные переходы.

Хотя браузер визуально отображает закруглённый элемент, это лишь эффект – содержимое всё равно может выходить за пределы скруглений. Поэтому важно учитывать этот нюанс при дизайне!

Примечание: При использовании border-radius не обязательно предварительно задавать границу элемента. Если рамки нет, браузер всё равно закружит угол фоновой области.