мое новое расписание: пн-пт с 8.00 по 16.00 по москве, сб и вс - выходные; после 16.00 и на вых. отвечаю по возможности

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

:

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