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

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

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

Установка значений для скругления углов элемента с помощью дуги эллипса немного отличается от скругления углов с помощью дуги окружности:

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

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

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