Сейчас мы научимся скруглять уголки у блока. Для этого следует применять свойство border-radius, принимающее значение в пикселях.
Что означает то, что мы указали скругление, к примеру, в 10px? Это радиус круга, который можно вписать в это скругление. Если у вас нелады с математикой и вам не понятно последнее предложение - забудьте о нем и просто подбирайте скругление на глаз. При некотором опыте это сделать не проблема (измерительного инструмента для измерения скруглений не существует, по крайней мере я о таком не слышал).
Давайте скруглим уголки блоку, задав ему скругление в 10px:
<div id="elem"></div>
#elem {
width: 300px;
height: 100px;
border: 1px solid red;
border-radius: 10px;
}
Результат выполнения кода: