тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

Скругленные уголки на CSS

Сейчас мы с вами научимся скруглять уголки у границ и фона. Для этого следует применять свойство border-radius, принимающее значение в пикселях.

Что означает то, что мы указали скругление, к примеру, в 10px? Это радиус круга, который можно вписать в это скругление. Если у вас нелады с математикой и вам не понятно последнее предложение - забудьте о нем и просто подбирайте скругление на глаз. При некотором опыте это сделать не проблема (измерительного инструмента для измерения скруглений не существует, по крайней мере я о таком не слышал).

Давайте скруглим уголки блоку, задав ему скругление в 10px:

<div id="elem"></div> #elem { width: 300px; height: 100px; border: 1px solid red; border-radius: 10px; }

:

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

Скругление фона

Наше свойство скругляет не только уголки не границы, но и фона:

<div id="elem"></div> #elem { border-radius: 20px; width: 300px; height: 100px; background-color: #e4f1ed; }

:

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

Делаем круг

Сругление в половину ширины и высоты сделает круг:

<div id="elem"></div> #elem { width: 100px; height: 100px; border-radius: 50px; border: 1px solid red; }

:

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