Свойство border-radius создает скругленные уголки для границы и фона.

Свойства border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius устанавливают скругление для определенных углов.

Свойство Описание
border-top-left-radius Задает скругление для левого верхнего угла.
border-top-right-radius Задает скругление для правого верхнего угла.
border-bottom-left-radius Задает скругление для левого нижнего угла.
border-bottom-right-radius Задает скругление для правого нижнего угла.

Синтаксис

Свойство border-radius может принимать 1, 2, 3 или 4 параметра, остальные свойства - только один параметр.

Число параметров Описание
1 Для всех углов одновременно.
2 Первый параметр для верхнего правого и нижнего левого углов, второй - для верхнего левого и нижнего правого.
3 Первый параметр задает скругление для верхнего левого угла, второй — одновременно для верхнего правого и нижнего левого, а третий — для нижнего правого угла.
4 Для данного кода border-radius: 20px 30px 40px 50px; углы скруглятся так: верхний левый - 20px, верхний правый - 30px, нижний правый - 40px, нижний левый - 50px.
селектор {
	border-radius: 200px;
}
селектор {
	border-radius: 30%;
}
селектор {
	border-radius: 20px 30px;
}
селектор {
	border-radius: 20px 30px 40px;
}
селектор {
	border-radius: 20px/30px;
}
селектор {
	border-radius: 20px/30px 30px/50px; - так не работает
}
селектор {
	border-radius: 35px 25px 30px 20px / 40px 50px 15px 30px; - а вот так работает
}
селектор {
	border-radius: 20px 30px 40px 50px;
}
селектор {
	border-top-left-radius: 10px;
	border-top-right-radius: 20px;
	border-bottom-left-radius: 30px;
	border-bottom-right-radius: 40px;
}
селектор {
	border-top-left-radius: 10px/20px; - так не работает
}

Значения для border-radius

Значение Описание
CSS единицы Устанавливает скругление в заданных CSS единицах, в том числе и в процентах.

Если установить border-radius в процентах для прямоугольника, то получится эллиптическое скругление. Если ширина задана в 400px, высота в 200px, а border-radius в 10%, то это все равно, как если бы было написано border-radius: 40px/20px. Эти значения получились отсюда: 40px = 400px*10%, 20px = 200px*10%.
Значение1/Значение2 Два значения через слеш устанавливают эллиптическое скругление (только для всех углов одновременно и только для свойства border-radius, не для сокращаемых свойств типа border-top-left-radius). Значение1 - это горизонтальная часть скругления, а Значение2 - вертикальная часть скругления, см. соответствующие примеры.

Можно использовать такой синтаксис: border-radius: 35px 25px 30px 20px / 40px 50px 15px 30px - до слеша идут все горизонтальные скругления, а после него - все вертикальные.

Значение по умолчанию: 0.

Примеры

Пример

#elem {
	border: 1px solid black;
	border-radius: 10px;
	width: 300px;
	height: 100px;
}

Результат выполнения кода:

Пример

#elem {
	border: 1px dotted black;
	border-radius: 10px;
	width: 300px;
	height: 100px;
}

Результат выполнения кода:

Пример

#elem {
	border: 1px solid black;
	border-radius: 10px 40px;
	width: 300px;
	height: 100px;
}

Результат выполнения кода:

Пример

#elem {
	border: 1px solid black;
	border-radius: 10px 50px 30px;
	width: 300px;
	height: 100px;
}

Результат выполнения кода:

Пример

#elem {
	border: 1px solid black;
	border-radius: 10px 30px 50px 70px;
	width: 300px;
	height: 100px;
}

Результат выполнения кода:

Пример

В данном примере мы можем наблюдать эллиптическое скругление (20px горизонтальная часть скругления, 40px - вертикальная):

#elem {
	border: 1px solid black;
	border-radius: 20px/40px;
	width: 300px;
	height: 100px;
}

Результат выполнения кода:

Пример

А сейчас установим разное эллиптическое скругление для всех углов по отдельности:

#elem {
	border: 1px solid black;
	border-radius: 35px 25px 30px 20px / 40px 50px 15px 30px;
	width: 300px;
	height: 100px;
}

Результат выполнения кода:

Пример

Минимальный (если поставить больше - все равно будет круг) border-radius для того, чтобы сделать круг из квадрата - половина ширины/высоты (у квадрата они равны):

#elem {
	border: 1px solid black;
	border-radius: 100px;
	width: 200px;
	height: 200px;
}

Результат выполнения кода:

Пример

Предыдущую задачу можно решить иным способом, если установить border-radius в 50% (преимущество в том, что при изменении высоты/ширины не придется менять скругление):

#elem {
	border: 1px solid black;
	border-radius: 50%;
	width: 200px;
	height: 200px;
}

Результат выполнения кода:

Пример

Если установить border-radius в процентах для прямоугольника, то получится эллиптическое скругление. Если ширина задана в 400px, высота в 200px, а border-radius в 10%, то это все равно, как если бы было написано border-radius: 40px/20px;. Эти значения получились отсюда: 40px = 400px*10%, 20px = 200px*10%:

#elem {
	border: 1px solid black;
	border-radius: 10%;
	width: 400px;
	height: 200px;
}

Результат выполнения кода:

Пример

Воспользуемся свойствами для каждого угла отдельно:

#elem {
	border: 1px solid black;
	border-top-left-radius: 10px;
	border-top-right-radius: 30px;
	border-bottom-left-radius: 50px;
	border-bottom-right-radius: 70px;
	width: 300px;
	height: 100px;
}

Результат выполнения кода:

Пример

Обратите внимание на то, что в данном примере скругляются уголки не границы, а фона:

#elem {
	background-color: #E4F1ED;
	border-radius: 20px;
	width: 300px;
	height: 100px;
}

Результат выполнения кода: