border-bottom-width

The border-bottom-width CSS property sets the width of the bottom border of an element.

Try it

Syntax

/* Keyword values */ border-bottom-width: thin; border-bottom-width: medium; border-bottom-width: thick; /* values */ border-bottom-width: 10em; border-bottom-width: 3vmax; border-bottom-width: 6px; /* Global keywords */ border-bottom-width: inherit; border-bottom-width: initial; border-bottom-width: revert; border-bottom-width: revert-layer; border-bottom-width: unset;

Values

Defines the width of the border, either as an explicit nonnegative or a keyword. If it’s a keyword, it must be one of the following values:

Note: Because the specification doesn’t define the exact thickness denoted by each keyword, the precise result when using one of them is implementation-specific. Nevertheless, they always follow the pattern thin ≤ medium ≤ thick , and the values are constant within a single document.

Formal definition

Initial value	medium
Applies to	all elements. It also applies to ::first-letter .
Inherited	no
Computed value	the absolute length or 0 if border-bottom-style is none or hidden
Animation type	a length

Formal syntax

Источник

border-bottom-width

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

HTML5 CSS2.1 IE Cr Op Sa Fx

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

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

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

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

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

Браузеры

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

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

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

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

CSS по категориям

Поля

Анимация

Градиент

Скруглённые уголки

Изображения

Псевдоэлементы

Псевдоклассы

Печать

Контент

Интерфейс

Таблица

Отступы

Список

Текст

Шрифт

Форматирование

Размеры

Позиционирование

Границы

Цвет и фон

Селекторы

Селекторы тегов
Идентификаторы
Классы
Мультиклассы
Универсальный селектор
Вложенные селекторы
Дочерние селекторы
Соседние селекторы
Родственные селекторы
[атрибут=»значение»]
[атрибут^=»значение»]
[атрибут$=»значение»]
[атрибут*=»значение»]
[атрибут~=»значение»]
[атрибут|=»значение»]
Селекторы атрибутов

Источник

border-bottom-width

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

Песочница

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

Пример

Рондо начинает определенный фьюжн.

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

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

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

Объект.style.borderBottomWidth

Примечание

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

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

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

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

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

Браузеры

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

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

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

См. также

Источник

CSS border-bottom-width Property

The border-bottom-width property sets the width of an element’s bottom border.

Note: Always declare the border-style or the border-bottom-style property before the border-bottom-width property. An element must have borders before you can change the width.

Default value:	medium
Inherited:	no
Animatable:	yes. Read about animatable Try it
Version:	CSS1
JavaScript syntax:	object.style.borderBottomWidth=»5px» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

CSS Syntax

Property Values

Value	Description	Demo
medium	Specifies a medium bottom border. This is default	Demo ❯
thin	Specifies a thin bottom border	Demo ❯
thick	Specifies a thick bottom border	Demo ❯
length	Allows you to define the thickness of the bottom border. Read about length units	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

More Examples

Example

Set the width of the bottom border to medium:

Example

Set the width of the bottom border to thick:

Example

Set the width of the bottom border to 1px:

Example

Set the width of the bottom border to 15px:

Источник

border-bottom-width

HTML5 CSS2.1 IE Cr Op Sa Fx

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

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

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

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

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

Браузеры

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

CSS по категориям

Поля

Анимация

Градиент

Скруглённые уголки

Изображения

Псевдоэлементы

Псевдоклассы

Печать

Контент

Интерфейс

Таблица

Отступы

Список

Текст

Шрифт

Форматирование

Размеры

Позиционирование

Границы

Цвет и фон

Селекторы

Селекторы тегов
Идентификаторы
Классы
Мультиклассы
Универсальный селектор
Вложенные селекторы
Дочерние селекторы
Соседние селекторы
Родственные селекторы
[атрибут=»значение»]
[атрибут^=»значение»]
[атрибут$=»значение»]
[атрибут*=»значение»]
[атрибут~=»значение»]
[атрибут|=»значение»]
Селекторы атрибутов

Источник