Разные скругления для разных углов 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;
}

Повторите страницу по данному образцу: