Скругленные уголки на 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;
}

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