Різні округлення для різних кутів CSS

Властивість border-radius може приймати не тільки одне значення, а й два, три або чотири. Кожне значення задаватиме заокруглення для свого кута. Давайте подивимося докладніше.

4 значення

Якщо встановлено чотири значення, то перше значення задає заокруглення для верхнього лівого кута, друге – для верхнього правого, третє – для нижнього правого кута, а четверте – для нижнього лівого кута:

<div id="elem"></div>

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

Повторіть сторінку за цим зразком:

2 значення

Якщо встановлено два значення, то перше значення задає заокруглення для верхнього правого та нижнього лівого кутів, друге – для верхнього лівого та нижнього правого:

<div id="elem"></div>

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

Повторіть сторінку за цим зразком:

3 значення

Якщо встановлено три значення, то перше значення задає заокруглення для верхнього лівого кута, друге - одночасно для верхнього правого і нижнього лівого, а третє – для нижнього правого кута.

<div id="elem"></div>

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

Повторіть сторінку за цим зразком: