Border width что это

Свойство border-width

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

Значением свойства служат любые единицы для размеров, кроме процентов, либо ключевые слова thin (граница в 2 пикселя), medium (граница в 4 пикселя) или thick (граница в 6 пикселей). Значение по умолчанию: medium .

Синтаксис

Количество значений

Свойство может принимать 1 , 2 , 3 или 4 значений, указываемых через пробел:

Количество	Описание
1	Тип для всех сторон одновременно.
2	Первое значение для верха и низа, второе — для левой и правой границ.
3	Первое значение для верха, второе — для левой и правой границ, третье — для нижней.
4	Первое значение для верхней границы, второе — для правой, третье — для нижней, четвертое — для левой границы.

Пример

Зададим границу толщиной в один пиксель:

border-width

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

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

Значение по умолчанию	medium
Наследуется	Нет
Применяется	Ко всем элементам
Анимируется	Да

Синтаксис

border-width: [ | thin | medium | thick]

Синтаксис

Описание	Пример
	Указывает тип значения.
A && B	Значения должны выводиться в указанном порядке.	&&
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,]*
+	Повторять один или больше раз.	+
?	Указанный тип, слово или группа не является обязательным.	inset?
	Повторять не менее A, но не более B раз.
#	Повторять один или больше раз через запятую.	#

Значения

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

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

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

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

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

div < background: #e4efc7; border: dotted #333; padding: 10px; border-width: >px; >

Пример

Результат данного примера показан на рис. 1.

Применение свойства border-width

Рис. 1. Применение свойства border-width

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

Объект.style.borderWidth

Примечание

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed . При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed .

Толщина границы при использовании ключевых слов thin , medium и thick в разных браузерах может несколько различаться.

Спецификация

Спецификация	Статус
CSS Backgrounds and Borders Module Level 3	Возможная рекомендация
CSS Level 2 (Revision 1)	Рекомендация
CSS Level 1	Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры

9.2

Браузеры

В таблице браузеров применяются следующие обозначения.

— элемент полностью поддерживается браузером;
— элемент браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

См. также

border-bottom-width
border-left-width
border-right-width
border-top-width
Граница в CSS

border — width

Задаёт ширину рамки элемента. Часто указывается в шорткате, но иногда пригождается и отдельно.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье
Контрибьюторы:

Обновлено 28 августа 2023

Кратко

Скопировать ссылку «Кратко» Скопировано

Свойство border — width управляет толщиной рамки элемента.

Пример

Скопировать ссылку «Пример» Скопировано

Для того чтобы увидеть работу свойства, необходимо помимо толщины рамки добавить ещё и значение свойства border — style .

 Блок текста, обведённый рамкой





 p class="text">Блок текста, обведённый рамкойp>

 .text  border-style: solid; border-width: 4px;> .text  border-style: solid; border-width: 4px; >

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Для задания толщины можно использовать три переменные — thin , medium или thick , в большинстве браузеров это соответствует размерам 2 px, 4 px и 6 px соответственно.

Сама же спецификация не приравнивает эти переменные к определённому размеру, а только говорит что значение thin должно быть меньше medium , а оно, в свою очередь, меньше thick , остальное контролируется на уровне браузера. Поэтому, для более точного значения, толщину можно указывать в пикселах или других единицах измерения .

Ключевое слово inherit наследует значение родителя, а initial применяет значение по умолчанию, равное medium .

Разрешается указывать одно, два, три или четыре значения. В зависимости от этого получится разный результат:

border — width : 1px — одно значение, толщина рамки со всех сторон одинаковая.
border — width : 1px 2px — два значения, первое устанавливает толщину рамки сверху и снизу, второе — слева и справа.
border — width : 1px 2px 3px — три значения, первое значение устанавливает толщину рамки сверху, второе — слева и справа, а третье — снизу.
border — width : 1px 2px 3px 4px — четыре значения, устанавливает для каждой стороны свою толщину, поочерёдно: для верхней, правой, нижней и левой рамки.

Чаще всего это свойство используется в шорткате border , так как обычно задаётся сразу и цвет и стиль и толщина рамки, а сокращённая форма позволяет сделать это более элегантно.

На этом демо можете посмотреть как выглядят разные размеры толщины рамки при разных значениях стиля рамки.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� Свойство не наследуется.

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

�� Можно анимировать, читайте подробнее про CSS — анимации .

�� Поддерживается всеми современными браузерами.

border-width

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

Синтаксис

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

Значения

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

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

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

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

HTML5 CSS2.1 IE Cr Op Sa Fx

    border-width   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Результат данного примера показан на рис. 1.

Применение свойства border-width

Рис. 1. Применение свойства border-width

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

[window.]document.getElementById(» elementID «).style.borderWidth

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значения hidden и inherit .

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.