border-width

Браузер	Internet Explorer				Chrome				Opera			Safari				Firefox
Версия	6.0	7.0	8.0	9.0	2.0	3.0	4.0	5.0	9.2	9.6	10	2.0	3.1	4.0	5.0	2.0	3.0	3.6	4.0
Поддержка

Краткая информация

CSS	CSS1+
Значение по умолчанию	medium
Наследуется	Нет
Применяется	Ко всем элементам
Ссылка на спецификацию	открыть в новой вкладке

Описание

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

Синтаксис

border-width: [значение | thin | medium | thick] {1,4} | inherit

Аргументы

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

Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества и приведен в табл. 1.

Число значений

Результат

Толщина границы будет установлена для всех сторон элемента.

Первое значение устанавливает толщину верхней и нижней границы, второе — левой и правой.

Первое значение задает толщину верхней границы, второе — одновременно левой и правой границы, а третье — нижней границы.

Поочередно устанавливает толщину верхней, правой, нижней и левой границы.

Табл. 1. Зависимость результата от числа значений

Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://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-width

Категории

Последние комментарии

	Русский
	English