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

:

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

←→
↑