border-bottom-color

CSS border-bottom-color Property

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

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

Default value: The current color of the element
Inherited: no
Animatable: yes. Read about animatable Try it
Version: CSS1
JavaScript syntax: object.style.borderBottomColor=»blue» 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
color Specifies the color of the bottom border. Look at CSS Color Values for a complete list of possible color values. Default color is the current color of the element Demo ❯
transparent Specifies that the border color should be transparent 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 a color for the bottom border with a HEX value:

Example

Set a color for the bottom border with an RGB value:

Example

Set a color for the bottom border with an RGBA value:

Читайте также:  Пустая строка в питоне как обозначается

Example

Set a color for the bottom border with a HSL value:

Example

Set a color for the bottom border with a HSLA value:

Example

Set a transparent bottom border:

Источник

border-bottom-color

transparent Устанавливает прозрачный цвет. inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

        

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

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

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

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

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

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

Браузеры

Internet Explorer 6 не поддерживает значение transparent . Браузер Internet Explorer до версии 7.0 включительно не поддерживает inherit .

Цвет границы в разных браузерах может несколько различаться при использовании значений стиля groove , ridge , inset или outset .

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

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

Поля

Анимация

Градиент

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

Изображения

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

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

Печать

Контент

Интерфейс

Таблица

Отступы

Список

Текст

Шрифт

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

Размеры

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

Границы

Цвет и фон

Селекторы

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

Источник

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-color

transparent Устанавливает прозрачный цвет. inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

        

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

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

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

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

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

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

Браузеры

Internet Explorer 6 не поддерживает значение transparent . Браузер Internet Explorer до версии 7.0 включительно не поддерживает inherit .

Цвет границы в разных браузерах может несколько различаться при использовании значений стиля groove , ridge , inset или outset .

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

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

Поля

Анимация

Градиент

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

Изображения

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

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

Печать

Контент

Интерфейс

Таблица

Отступы

Список

Текст

Шрифт

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

Размеры

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

Границы

Цвет и фон

Селекторы

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

Источник

Оцените статью