Свойство border-width задает толщину границы для всех сторон одновременно или отдельно для каждой стороны.

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

См. также свойства border-color и border-style, а также свойство-сокращение для границы border.

Синтаксис

селектор {
	border-width: CSS единицы | thin | medium | thick;
}

Может принимать 1, 2, 3 или 4 параметра.

Число параметров Описание
1 Толщина для всех сторон одновременно.
2 border-width: 1px 2px; - 1px для верха и низа, 2px для левой и правой.
3 border-width: 1px 2px 3px; - 1px для верха, 2px для левой и правой, 3px для низа.
4 border-width: 1px 2px 3px 4px; - 1px для верха, 2px для правой, 3px для низа, 4px для левой.

Значения

Значение Описание
CSS единицы Значение в заданных единицах (кроме процентов).
thin 2 пикселя.
medium 4 пикселя.
thick 6 пикселей.

Значение по умолчанию: medium.

В процентах задание толщины невозможно.

Примеры

Пример

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

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

Пример

#elem {
	border-width: 4px;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

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

Пример

Зададим толщину верхней и нижней границы в 1px, а правой и левой - в 4px:

#elem {
	border-width: 1px 4px;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

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

Пример

Зададим толщину верхней границы в 1px, правой и левой - в 4px, а нижней в 6px:

#elem {
	border-width: 1px 4px 6px;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

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

Пример

Зададим толщину верхней границы в 1px, правой в 4px, нижней - в 6px, а левой в 8px:

#elem {
	border-width: 1px 4px 6px 8px;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

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

Пример

Зададим толщину границы ключевым словом thin:

#elem {
	border-width: thin;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

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

Пример

Зададим толщину границы ключевым словом medium:

#elem {
	border-width: medium;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

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

Пример

Зададим толщину границы ключевым словом thick:

#elem {
	border-width: thick;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

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

Пример

Зададим разную границу для разных сторон:

#elem {
	border-width: 1px 2px 3px 4px;
	border-style: dashed dotted solid double;
	border-color: red blue green black;
	width: 300px;
	height: 100px;
}

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

Пример

Предыдущий пример можно переписать следующим образом (аналогично можно сделать и для border-style и border-color):

#elem {
	border-top-width: 1px;
	border-right-width: 2px;
	border-bottom-width: 3px;
	border-left-width: 4px;
	border-style: dashed dotted solid double;
	border-color: red blue green black;
	width: 300px;
	height: 100px;
}

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