Закруглені куточки на 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;
}

Повторіть сторінку за цим зразком: