Свойство border задает цвет, тип и толщину границы для всех сторон одновременно. Является свойством-сокращением для border-width, border-style и border-color. В отличие от сокращаемых свойств не может задавать разную границу для 4-х сторон сразу, а только одинаковую для всех.

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

Свойство Описание
border-left Задает цвет, стиль и цвет левой границы.
border-right Задает цвет, стиль и цвет правой границы.
border-top Задает цвет, стиль и цвет верхней границы.
border-bottom Задает цвет, стиль и цвет нижней границы.

Синтаксис

Порядок свойств значения не имеет.

селектор {
	border: толщина тип цвет;
}
селектор {
	border-left: толщина тип цвет;
}

Значения

См. border-width, border-style, border-color.

Примеры

Пример

В данном примере будет черная граница толщиной в 1px:

#elem {
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

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

Пример

А здесь будет только левая граница:

#elem {
	border-left: 1px solid black;
	width: 300px;
	height: 100px;
	background-color: #E4F1ED;
}

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

Пример

Только правая граница:

#elem {
	border-right: 1px solid black;
	width: 300px;
	height: 100px;
	background-color: #E4F1ED;
}

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

Пример

Только нижняя граница:

#elem {
	border-bottom: 1px solid black;
	width: 300px;
	height: 100px;
	background-color: #E4F1ED;
}

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

Пример

Только верхняя граница:

#elem {
	border-top: 1px solid black;
	width: 300px;
	height: 100px;
	background-color: #E4F1ED;
}

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