Граница для отдельных сторон в CSS

Существуют также свойства-сокращения для отдельных сторон: border-left (левая граница), border-right (правая граница), border-top (верхняя граница), border-bottom (нижняя граница).

Давайте сделаем блоку только левую границу с помощью свойства border-left:

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

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

А теперь одновременно сделаем и левую, и правую границы:

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

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

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

← →

↑