css-border-width

  • 08.07.2026
  • admin
  • 1минут читать

<border-width>

CSS CSS1
Значение по умолчанию medium
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML <img border > | <table border>
Ссылка на спецификацию https://www.w3.org/TR/CSS21/box.php#border-width-properties

Описание

Задает толщину границы одновременно на всех сторонах элемента или индивидуально для каждой стороны. Способ изменения толщины зависит от числа аргументов.

Синтаксис

border-width: thin | medium | thick | значение

Аргументы

Три переменные — thin (2 пиксела), medium (4 пиксела) и thick (6 пикселов) задают толщину границы. Для более точного значения, толщину можно указывать в пикселах или других единицах. Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества аргументов и приведен в табл. 1.

Табл. 1. Зависимость результата использования атрибута от числа аргументов
Число аргументов Результат
1 Толщина рамки будет установлена для всех сторон элемента.
2 Первый аргумент устанавливает толщину верхней и нижней границы, второй аргумент — левой и правой.
3 Первый аргумент задает толщину верхней границы, второй — одновременно левой и правой стороны, а третий — нижней границы.
4 Поочередно устанавливается толщину верхней, правой, нижней и левой границы.

Пример

Валидный CSS
Валидный HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>border-width</title>
<style type="text/css">
P {
 border-style: double; /* Стиль рамки вокруг параграфа */
 border-width: 3px 7px 7px 4px; /* Толщина границы */
 padding: 7px; /* Поля вокруг текста */
}
</style>
</head>
<body>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>

</body>
</html>

Объектная модель

[window.]document.getElementById("elementID").style.borderWidth

Границы, рамки

  • border позволяет одновременно установить толщину, стиль и цвет рамки вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.
  • border-bottom позволяет одновременно установить толщину, стиль и цвет границы внизу элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.
  • border-bottom-color устанавливает цвет границы внизу элемента.
  • border-bottom-style устанавливает стиль границы внизу элемента.
  • border-bottom-width задает толщину границы внизу элемента.
  • border-color устанавливает цвет границы на разных сторонах элемента. Параметр позволяет задать цвет границы сразу на всех сторонах элемента или определить цвет границы только на указанных сторонах.
  • border-left позволяет одновременно установить толщину, стиль и цвет левой границы элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.
  • border-left-color задает цвет границы слева от элемента.
  • border-left-style устанавливает стиль границы слева от элемента.
  • border-left-width задает толщину границы слева от элемента.
  • border-right позволяет одновременно установить толщину, стиль и цвет правой границы элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.
  • border-right-color задает цвет границы справа от элемента. Значение цвета может задаваться по его названию, шестнадцатеричному значению, либо с помощью RGB.
  • border-right-style устанавливает стиль границы справа от элемента.
  • border-right-width устанавливает толщину границы справа от элемента.
  • border-style устанавливает стиль рамки вокруг элемента. Допустимо задавать индивидуальные стили для разных сторон элемента.
  • border-top-color задает цвет границы сверху элемента.
  • border-top-style устанавливает стиль границы сверху элемента.
  • border-top-width устанавливает толщину границы сверху элемента.
  • border-width задает толщину границы одновременно на всех сторонах элемента или индивидуально для каждой стороны. Способ изменения толщины зависит от числа аргументов.
  • border-top одновременно задает толщину, стиль и цвет границы сверху элемента.