Скругление границ блока в CSS

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

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

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

<div id="elem"></div>

#elem {
	width: 300px;
	height: 100px;
	border: 1px solid red;
	border-radius: 10px;
}

Результат выполнения кода: