Свойство border-width - устанавливает ширину границы элемента.
Ширина бордюра может быть заданна с помощью следующих аргументов:
thin - тонкая граница
medium - средняя толщина границы
thick - толстая граница
А также в пикселях или любых других единицах измерения принятых в CSS.
По аналогии со стилем, толщина бордюра тоже может иметь от одного до четырёх значений и в каждом случае устанавливает ёе для тех или иных сторон бордюра как показано в таблице ниже.
Число значений
Результат
Пример: div {border-style: solid; border-width: 1px;}
Первое значение - Устанавливает единую толщину бордюра со всех сторон.
Пример: div {border-style: solid; border-width: 1px 4px;}
Первое значение - Устанавливает толщину верхней и нижней границы элемента.
Второе значение - Устанавливает толщину левой и правой границы элемента.
Пример: div {border-style: solid; border-width: 1px 4px 7px;}
Первое значение - Устанавливает толщину верхней границы элемента.
Второе значение - Устанавливает толщину левой и правой границы элемента.
Третье значение - Устанавливает толщину нижней границы элемента.
Пример: div {border-style: solid; border-width: 1px 4px 7px 5px;}
Первое значение - Устанавливает толщину верхней границы элемента.
Второе значение - Устанавливает толщину правой границы элемента.
Третье значение - Устанавливает толщину нижней границы элемента.
Четвёртое значение - Устанавливает толщину левой границы элемента.
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Толщина границы</title> </head> <body> <div style="border-style: solid; border-width: 3px 1px 10px 4px"> Толщина границ данного блока: <ul> <li>Сверху 3 пикселя <li>Справа 1 пиксель <li>Снизу 10 пикселей <li>Слева 4 пикселя </ul> </div> <br><br> <div style="border-style: double; border-width: thick">В этом блоке границы со всех сторон одинаково толстые</div> </body> </html>