Главная » Языки программирования

border-bottom-width

Содержание
  1. CSS border-bottom-width Property
  2. Browser Support
  3. CSS Syntax
  4. Property Values
  5. More Examples
  6. Example
  7. Example
  8. Example
  9. Example
  10. border-bottom
  11. Constituent properties
  12. Syntax
  13. Values
  14. Formal definition
  15. Formal syntax
  16. Examples
  17. Applying a bottom border
  18. HTML
  19. CSS
  20. Results
  21. Specifications
  22. Browser compatibility
  23. See also
  24. Found a content problem with this page?
  25. MDN
  26. Support
  27. Our communities
  28. Developers
  29. border-bottom-width
  30. Try it
  31. Syntax
  32. Values
  33. Formal definition
  34. Formal syntax
  35. border-bottom-width
  36. Объектная модель
  37. Браузеры
  38. CSS по категориям
  39. Селекторы
  40. border-bottom-width
  41. Объектная модель
  42. Браузеры
  43. CSS по категориям
  44. Селекторы

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:

Читайте также:  How to increment python

Example

Set the width of the bottom border to 15px:

Источник

border-bottom

Как и все сокращённые свойства, border-bottom устанавливает значения всех свойств, которые он может установить, даже если они не указаны. Для тех свойств, которые не указаны оно устанавливает значения по умолчанию. Это означает, что .

border-bottom-style: dotted; border-bottom: thick green; 
border-bottom-style: dotted; border-bottom: none thick green;

. и значение border-bottom-style (en-US), указанное перед border-bottom игнорируется. Поскольку значением по умолчанию для border-bottom-style (en-US) является none , то без указания border-style граница не будет показана.

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

border-bottom: 1px; border-bottom: 2px dotted; border-bottom: medium dashed blue;

The three values of the shorthand property can be specified in any order, and one or two of them may be omitted.

Values

Formal definition

  • border-bottom-width (en-US): medium
  • border-bottom-style (en-US): none
  • border-bottom-color (en-US): currentcolor
  • border-bottom-width (en-US): абсолютная длина или 0 , если border-bottom-style (en-US) — none или hidden
  • border-bottom-style (en-US): как указано
  • border-bottom-color (en-US): вычисленный цвет
  • border-bottom-color (en-US): цвет
  • border-bottom-style (en-US): discrete
  • border-bottom-width (en-US): длина

Formal syntax

border-bottom =
|| (en-US)
|| (en-US)

=
| (en-US)
thin | (en-US)
medium | (en-US)
thick

=
none | (en-US)
hidden | (en-US)
dotted | (en-US)
dashed | (en-US)
solid | (en-US)
double | (en-US)
groove | (en-US)
ridge | (en-US)
inset | (en-US)
outset

Examples

Applying a bottom border

HTML

div> This box has a border on the bottom side. div>

CSS

div  border-bottom: 4px dashed blue; background-color: gold; height: 100px; width: 100px; font-weight: bold; text-align: center; >

Results

Specifications

Specification Status Comment
CSS Backgrounds and Borders Module Level 3
Определение ‘border-bottom’ в этой спецификации.		 Кандидат в рекомендации No direct changes, though the modification of values for the border-bottom-color (en-US) do apply to it.
CSS Level 2 (Revision 1)
Определение ‘border-bottom’ в этой спецификации.		 Рекомендация No significant changes.
CSS Level 1
Определение ‘border-bottom’ в этой спецификации.		 Рекомендация Initial definition

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on 17 июл. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

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.

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

Рис. 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 пикселов) задают толщину границы внизу. Для более точного значения, толщину можно указывать в пикселах или других единицах. 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.

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

Рис. 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 по категориям

Поля

Анимация

Градиент

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

Изображения

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

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

Печать

Контент

Интерфейс

Таблица

Отступы

Список

Текст

Шрифт

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

Размеры

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

Границы

Цвет и фон

Селекторы

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

Источник

Оцените статью
© 2024 Программирование