Border bottom color: border-bottom-color | htmlbook.ru

Содержание

border-bottom-color | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+3.5+1.0+1.0+1.0+1.0+

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

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Устанавливает цвет границы внизу элемента.

Синтаксис

border-bottom-color: цвет | transparent | inherit

Значения

См. цвет

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

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-bottom-color</title>
  <style>
   #panel {
    background: #ccc; /* Цвет фона */
   } 
   #panel p {
    padding: 5px; /* Добавляем поля */
    margin: 0; /* Убираем отступы у параграфа */
   }
   #title {
    background: navy; /* Цвет фона */
    color: white; /* Цвет текста */
    border-bottom-width: 2px; /* Толщина линии внизу */
    border-bottom-style: solid; /* Стиль линии внизу */
    border-bottom-color: white; /* Цвет линии внизу */
   }
  </style>
 </head>
 <body>

  <div>
  <p>Lorem ipsum dolor sit amet</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
     sed diem nonummy nibh euismod tincidunt ut lacreet dolore 
     magna aliguam erat volutpat.
</p> </div> </body> </html>

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

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

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

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

Браузеры

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

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

border-bottom — CSS | MDN

Сокращённое свойство CSS border-bottom описывает нижнюю границу элемента border. Оно устанавливает значения border-bottom-width, border-bottom-style и border-bottom-color.

The source for this interactive example is stored in a GitHub repository. If you’d like to contribute to the interactive examples project, please clone https://github. com/mdn/interactive-examples and send us a pull request.

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

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

… это то же самое, что …

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

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

This property is a shorthand for the following CSS properties:

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

<line-width> || <line-style> || <color>

где
<line-width> = <length> | thin | medium | thick
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

где
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )

где
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

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

BCD tables only load in the browser

border-bottom | CSS (Примеры)

Свойство border-bottom позволяет одновременно установить толщину, стиль и цвет нижней границы элемента.

Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству.

Фон

Синтаксис

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

Значения

Значение border-bottom-width определяет толщину границы. Для управления её видом предоставляется несколько значений свойства border-bottom-style. Их названия и результат действия представлен на рис. 1.

border-bottom-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.

Значение по-умолчанию: Зависит от использования

Применяется к: Ко всем элементам

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

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>border-bottom</title>
    <style>
      .panel {
        background: #ccc; /* Цвет фона */
      }
      .panel p.content {
        padding: 5px; /* Добавляем поля */
        margin: 0; /* Убираем отступы у параграфа */
        border-top: 2px dotted white; /* Параметры линии вверху */
      }
      .panel p.title {
        font-family: sans-serif; /* Рубленый шрифт */
        font-weight: bold; /* Жирное начертание */
        font-size: 90%; /* Размер шрифта */
        padding: 5px; /* Добавляем поля */
        margin: 0; /* Убираем отступы у параграфа */
        background: maroon; /* Цвет фона */
        color: white; /* Цвет текста */
        border-bottom: 2px solid white; /* Параметры линии внизу */
      }
    </style>
  </head>
  <body>
    <div>
      <p>
        Резкий базовый тип личности глазами современников
      </p>
      <p>
        Его экзистенциальная тоска выступает как
        побудительный мотив творчества, однако пародия
        многопланово заканчивает общекультурный цикл.
</p> </div> </body> </html>

CSS-свойства и media queries — Help Mail.ru. Для разработчиков

Почта поддерживает следующие CSS-свойства:

azimuth

сolumn-rule-color

outline

background

column-rule-style

outline-color

background-blend-mode

column-rule-width

outline-style

background-clip

column-span

outline-width

background-color

column-width

overflow

background-image

columns

overflow-x

background-origin

direction

overflow-y

background-position

display

padding

background-repeat

elevation

padding-bottom

background-size

empty-cells

padding-left

border

float

padding-right

border-bottom

font

padding-top

border-bottom-color

font-family

pause

border-bottom-left-radius

font-feature-settings

pause-after

border-bottom-right-radius

font-kerning

pause-before

border-bottom-style

font-size

pitch

border-bottom-width

font-size-adjust

pitch-range

border-collapse

font-stretch

quotes

border-color

font-style

richness

border-left

font-synthesis

speak

border-left-color

font-variant

speak-header

border-left-style

font-variant-alternates

speak-numeral

border-left-width

font-variant-caps

speak-punctuation

border-radius

font-variant-east-asian

speech-rate

border-right

font-variant-ligatures

stress

border-right-color

font-variant-numeric

table-layout

border-right-style

font-weight,height

text-align

border-right-width

image-orientation

text-combine-upwrite

border-spacing

image-resolution

text-decoration

border-style

isolation

text-decoration-color

border-top

letter-spacing

text-decoration-line

border-top-color

line-height

text-decoration-skip

border-top-left-radius

list-style

text-decoration-style

border-top-right-radius

list-style-position

text-emphasis

border-top-style

list-style-type

text-emphasis-color

border-top-width

margin

text-emphasis-style

border-width

margin-bottom

text-indent

box-sizing

margin-left

text-orientation

break-after

margin-right

text-overflow

break-before

margin-top

text-transform

break-inside

max-height

text-underline-position

caption-side

max-width

unicode-bidi

clear

min-height

vertical-align

color

min-width

voice-family

column-count

mix-blend-mode

width

column-fill

object-fit

word-spacing

column-gap

object-position

writing-mode

column-rule

opacity

Почта поддерживает следующие media queries:

all

min-device-width

max-resolution

screen

max-device-width

and

min-width

orientation only

max-width

min-resolution

prefers-color-scheme

Границы — Material-UI

Используй настройки border и border-radius для стилизации элементов. Доступно для изображений, кнопок и других элементов.

Border

Используй настройки для добавления или удаления границ. Можно устанавливать как все сразу, так и каждую часть по отдельности.

Добавление

<Box border={1}>…
<Box borderTop={1}>…
<Box borderRight={1}>…
<Box borderBottom={1}>…
<Box borderLeft={1}>…

Удаление

<Box border={0}>…
<Box borderTop={0}>…
<Box borderRight={0}>…
<Box borderBottom={0}>…
<Box borderLeft={0}>…

Цвет границы

<Box borderColor="primary.main">…
<Box borderColor="secondary.main">…
<Box borderColor="error.main">…
<Box borderColor="grey.500">…
<Box borderColor="text.primary">…

Border-radius

<Box borderRadius="50%">…
<Box borderRadius="borderRadius">…
<Box borderRadius={16}>…

API

import { borders } from '@material-ui/system';
ИмпортСвойствоСвойство CSSВ теме
borderborderborderborders
borderTopborderTopborder-topborders
borderLeftborderLeftborder-leftborders
borderRightborderRightborder-rightborders
borderBottomborderBottomborder-bottomborders
borderColorborderColorborder-colorpalette
borderRadiusborderRadiusborder-radiusshape

Свойство border-color — цвет границы

Свойство border-color задает цвет границы для всех сторон одновременно или отдельно для каждой стороны. Значением свойства служат любые единицы для цвета. Значение по умолчанию: такой же цвет, как и у текста блока.

Свойство является свойством-сокращением для следующих свойств: border-left-color, border-right-color, border-top-color, border-bottom-color.

Синтаксис

селектор { border-color: цвет; }

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

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

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

Пример

Давайте покрасим границу блока в красный цвет:

<div></div> #elem { border-width: 1px; border-style: solid; border-color: red; width: 300px; height: 100px; }

:

Пример

Зададим красную границу для верхней и нижней стороны, а голубую для правой и левой стороны:

<div></div> #elem { border-width: 1px; border-style: solid; border-color: red blue; width: 300px; height: 100px; }

:

Пример

Зададим красную границу для верхней стороны, голубую для правой, зеленую для нижней, черную для левой стороны:

<div></div> #elem { border-width: 1px; border-style: solid; border-color: red blue green black; width: 300px; height: 100px; }

:

Пример

Зададим одновременно разную толщину, тип и цвет границы:

<div></div> #elem { border-width: 1px 2px 3px 4px; border-style: dashed dotted solid double; border-color: red blue green black; width: 300px; height: 100px; }

:

Пример

Если цвет границы не задан в border-color — он возьмется из свойства color:

<div></div> #elem { color: red; border-style: solid; border-width: 2px; width: 300px; height: 100px; }

:

Смотрите также

  • свойство border-width,
    которое задает толщину границы
  • свойство border-style,
    которое задает тип границы
  • свойство border,
    которое является свойством-сокращением для границы

Руководство CSS Borders

Свойство (property) CSS Border используется для установки границы (border) элементу, точнее ширину границы (border width), стиль границы (border style), и цвет границы (border color).

Самый простой синтаксис для установки границы (border) для элемента:


border: border-width  border-style   border-color;

/* Example: */

border: 40px solid LightGray;

Пример:

<div>

    This is a div <br/>
    border: 40px solid LightGray;

</div>
border-widthНеобязательно, значением по умолчанию является medium.
border-styleОбязательно.
border-colorНеобязательно, его значение по умолчанию зависит от графической среды пользователя (User’s graphic environment)
<div>
    3 values (border-width, border-style, border-color):
    <p>border: 1px solid LightGray;</p>
</div>

<div>
    2 values (border-style, border-color):
    <p>border: solid LightGray;</p>
</div>

<div>
    1 values (border-style):
    <p>border: solid;</p>
</div>

Вместо использования CSS border вы можете использовать 3 свойства (property): CSS border-width & CSS border-style & CSS border-color.

<div>

    <p>border-width: 40px; border-style: solid; border-color: LightGray;</p>

</div>

Свойство (property) CSS border-width используется для установки ширины границы для элемента. Вы можете предоставить ему 4 значения, включая ширину верхней стороны, ширину правой стороны, ширину нижней стороны, ширину левой стороны.

border-width: border-top-width  border-right-width  border-bottom-width  border-left-width;

/* Example: */

boder-width:  10px 20px 30px 40px;

Если вы предоставите 2 значения для CSS border-width, первое значение применяется к верхней и нижней стороне, второе значение применяется к левой и правой стороне.

Если вы предоставите 3 значения для CSS border-width, первое значение применяется к верхней стороне, второе значение применяется к левой и правой стороне, третье значение применяется к нижней стороне.

Если вы предоставите 1 значения для CSS border-width, оно будет применено ко всем 4-м сторонам элемента.

/* Keyword values */
border-width: thin;
border-width: medium;
border-width: thick;

/* <length> values */
border-width: 4px;
border-width: 1.2rem;

/* vertical | horizontal */
border-width: 2px 1.5em;

/* top | horizontal | bottom */
border-width: 1px 2em 1.5cm;

/* top | right | bottom | left */
border-width: 1px 2em 0 4rem;

/* Global keywords */
border-width: inherit;
border-width: initial;
border-width: unset;

Вместо использования CSS border-width, вы можете использовать CSS border-top-width, CSS border-right-width, CSS border-bottom-width, CSS border-left-width.

css-border-width-example5.html

<!DOCTYPE html>
<html>

<head>
    <title>CSS Border</title>
    <meta charset="UTF-8"/>
    <style>
        .my-div {
            padding:10px;
            border-top-width: thin;
            border-bottom-width:thick;
            border-left-width: 1px;
            border-right-width: 10px;

            border-style: solid;
        }
    </style>
</head>

<body>

    <h4>CSS border-width</h4>

    <div>
        border-top-width: thin; <br/>
        border-bottom-width:thick; <br/>
        border-left-width: 1px;  <br/>
        border-right-width: 10px; <br/>
    </div>

</body>
</html>

Свойство (property) CSS border-style используется для настройки стиля границы (border style) для элемента. Вы можете ей предоставить 4 значения, это стили верхней, правой, нижней и левой сторон. 

border-style: border-top-style  border-right-style  border-bottom-style  border-left-style;

/* Example: */

border-style: dotted dashed solid double;

css-border-style-example.html

<div>

    border-style: dotted dashed solid double;

</div>

Если вы предоставите 2 значения для CSS border-style, первое значение применяется к верхней и нижней сторонам, второе значение применяется к левой и правой сторонам.

<div>

    border-style: dotted dashed;

</div>

Если вы предоставите 3 значения для CSS border-style, первое значение применяется к верхней стороне, второе значение применяется к левой и правой сторонам, третье значение применяется к нижней стороне.

css-boder-style-example3.html

<div>

    border-style: dotted dashed solid;

</div>

Если вы предоставите 1 значение для CSS border-style, оно применится ко всем сторонам элемента.

Возможные значения у CSS border-style:

  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset
  • none
  • hidden
<div>border-style:dotted</div>

<div>border-style:dashed</div>

<div>border-style:solid</div>

<div>border-style:double</div>

<div>border-style:groove</div>

<div>border-style:ridge</div>

<div>border-style:inset</div>

<div>border-style:outset</div>

<div>border-style:none</div>

<div>border-style:hidden</div>

Вместо использования CSS border-style, вы можете использовать CSS border-top-style, CSS border-right-style, CSS border-bottom-style, CSS border-left-style.

css-boder-style-example5.html

<!DOCTYPE html>
<html>

<head>
    <title>CSS Border</title>
    <meta charset="UTF-8"/>
    <style>
        .my-div {
            padding:10px;
            border-width: 5px;

            border-top-style: dotted;
            border-right-style: dashed;
            border-bottom-style: solid;
            border-left-style: double;
        }
    </style>
</head>

<body>

    <h4>CSS border-style</h4>

    <div>
      border-top-style: dotted; <br/>
      border-right-style: dashed; <br/>
      border-bottom-style: solid; <br/>
      border-left-style: double;
    </div>

</body>
</html>

4- CSS border-style: none vs hidden

CSS border-style:none и CSS border-style:hidden одинаковы, они только отличаются когда используются для свернутой таблицы (Collapsed table). Вы можете просмотреть объяснение в статье ниже:

Свойство (property) CSS border-color используется для установки цвета границы (border color) для элемента. Вы можете предоставить ему 4 значения, это цвета для верхней, правой, нижней и левой сторон.

<div>

    border-color: green red purple yellow;

</div>

Если вы предоставите 2 значения для CSS border-color, первое значение применяется к верхней и нижней сторонам, второе значение применяется к левой и правой сторонам

<div>

    border-color: green red;

</div>

Если вы предоставите 3 значения для CSS border-color, первое значение применяется к верхней cтороне, второе значение применяется к левой и правой сторонам, третье значение применяется к нижней стороне.

css-border-color-example3.html

<div>

    border-color: green red blue;

</div>

Вместо использования CSS border-color, вы можете использовать CSS border-top-color, CSS border-right-color, CSS border-bottom-color, CSS border-left-color.

border-top-color: blue;
border-right-color: red;
border-bottom-color: purple;
border-left-color: yellow;

border-bottom — CSS: каскадные таблицы стилей

Сокращенное свойство CSS border-bottom устанавливает нижнюю границу элемента. Он устанавливает значения border-bottom-width , border-bottom-style и border-bottom-color .

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.

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

  border-bottom-style: пунктирная;
нижняя граница: густо-зеленый;
  

… фактически то же самое, что …

  border-bottom-style: пунктирная;
нижняя граница: без густого зеленого цвета;
  

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

Это свойство является сокращением для следующих свойств CSS:

  нижняя граница: 1px;
нижняя граница: 2 пикселя с точкой;
нижняя граница: синяя пунктирная линия;
  

Три значения сокращенного свойства могут быть указаны в любом порядке, и одно или два из них могут быть опущены.

Значения

   || <стиль-линия> || <цвет>, где <ширина линии> = <длина> | тонкий | средний | толстый <стиль-линии> = нет | скрытый | пунктирная | пунктирная | твердый | двойной | паз | гребень | вставка | исходный <цвет> =  |  |  |  |  | <имя-цвета> | текущий цвет | <цвет устаревшей системы> где  = rgb (<процент> {3} [/ <альфа-значение>]?) | rgb (<число> {3} [/ <альфа-значение>]?) | rgb (<процент> # {3}, <альфа-значение>?) | rgb (<число> # {3}, <альфа-значение>?)  = rgba (<процент> {3} [/ <альфа-значение>]?) | rgba (<число> {3} [/ <альфа-значение>]?) | rgba (<процент> # {3}, <альфа-значение>?) | rgba (<число> # {3}, <альфа-значение>?)  = hsl (<оттенок> <процент> <процент> [/ <альфа-значение>]?) | hsl (<оттенок>, <процент>, <процент>, <альфа-значение>?)  = hsla (<оттенок> <процент> <процент> [/ <альфа-значение>]?) | hsla (<оттенок>, <процент>, <процент>, <альфа-значение>?), где <альфа-значение> = <число> | <процент> <оттенок> = <число> |   

Применение нижней границы

HTML
  
Это поле имеет границу с нижней стороны.
CSS
  div {
  border-bottom: синий пунктир 4px;
  цвет фона: золото;
  высота: 100 пикселей;
  ширина: 100 пикселей;
  font-weight: жирный;
  выравнивание текста: центр;
}
  
Результаты

таблицы BCD загружаются только в браузере

border-bottom-color · Документы WebPlatform

Сводка

Устанавливает цвет нижней границы. На этой странице объясняется значение border-bottom-color, но часто вам будет удобнее исправить нижний цвет границы как часть сокращенного набора: border-bottom или border-color.

Цвета можно определить несколькими способами. Для получения дополнительной информации см. Использование.

Обзорная таблица

Начальное значение
цвет - Значение свойства ‘цвет’
Относится к
Все элементы
Унаследовано
Нет
Медиа
визуал
Расчетное значение
, когда берется из свойства «цвет», вычисленное значение «цвет»; в противном случае, как указано
Анимационный
Да
Свойство объектной модели CSS
borderTopColor
процентов
Н / Д

Синтаксис

  • border-bottom-color:
  • border-bottom-color: currentColor
  • border-bottom-color: наследовать
  • цвет нижней границы: прозрачный

Значения

<цвет>
Вычисленное значение свойства «цвет». Это значение может быть ключевым словом основного цвета, например красным или бледно-лиловым, числовым значением, значением RGB или RGBA или значением HSL или HSLA. Для получения дополнительной информации см. Использование.
унаследовать
currentColor, значение цвета, унаследованное от родительского объекта.
current Цвет
То же, что и «цвет: наследование», значение цвета, унаследованное от родительского объекта.
прозрачный
Полностью прозрачный. Это ключевое слово можно рассматривать как сокращение для прозрачного черного, rgba (0,0,0,0), которое является его вычисленным значением.

Примеры

В следующем примере показано использование border-bottom-color путем создания набора из 7 прямоугольников с цветами радуги, каждый из которых использует свой способ представления цветового кода. (Некоторые правила стиля опущены для краткости.)

  .box {
  граница: 5 пикселей сплошная #efefef;
}

.  named-value {
  цвет нижней границы: красный;
}

.hex-value {
  цвет нижней границы: # FD6C02;
}

.rgb-value {
  граница нижнего цвета: RGB (255, 255, 0);
}

.rgb-процент-значение {
  цвет нижней границы: rgb (0%, 100%, 0%);
}

.hsl-value {
  цвет нижней границы: hsl (240, 100%, 50%);
}

.rgba-value {
  цвет нижней границы: rgba (75, 0, 130, 0,8);
}

.hsla-value {
  цвет нижней границы: hsla (282, 100%, 41%, 0,8);
}
  

Посмотреть живой пример

  

Именованный цвет

красный

Шестнадцатеричный цвет

#FD6C02

Цвет RGB

rgb (255, 255, 0)

Процентный цвет RGB

rgb (0%, 100%, 0%)

Цвет HSL

HSL (240, 100%, 50%)

RGB с альфа-цветом

rgba (75, 0, 130, 0.8)

HSL с альфа-цветом

hsla (282, 100%, 41%, 0,8)

Использование

  Значение цвета может быть ключевым словом свойства, расширенным ключевым словом или числовым значением.  Два ключевых слова свойства: currentColor и transparent. currentColor - это значение свойства «цвет» родительского объекта. прозрачный - это сокращение от прозрачного черного, rgba (0,0,0,0). 

Значение цвета также может быть числовым, например одним из следующих:

  • ключевое слово основного цвета, например «красный»
  • шестнадцатеричное значение, например # ff0000
  • значение красно-зелено-синего (RGB), например rgb (255,0,0)
  • — RGB-альфа (RGBA), включающая непрозрачность цвета, например rgba (255,0,0,1) или rgba (100%, 0%, 0%, 1)
  • оттенок-насыщенность-легкость (HSL), например hsl (0, 100%, 50%)
  • HSLa, например hsl (0, 100%, 50%, 1)

Значение цвета также может быть расширенным ключевым словом, например aliceblue или lavenderblush.Полный список расширенных ключевых слов см. В спецификации CSS Color Module Level 3, которая представляет собой объединение различных спецификаций.

Связанные спецификации

CSS уровень 3 — Модуль фона и границ
W3C кандидат в рекомендации
CSS, уровень 2 (редакция 1)
Рекомендация W3C
CSS Уровень 3 — Цветовой модуль
Рекомендация W3C

См. Также

Статьи по теме

Граница

Связанные страницы

Атрибуции

CSS цвет нижней границы

Пример <стиль> div.цвет { размер шрифта: 1.5em; отступ: 20 пикселей; ширина нижней границы: 7 пикселей; стиль нижней границы: сплошной; цвет нижней границы: оранжевый; }

Этот div оформлен с использованием цвета рамки CSS. Попробуйте изменить значение, чтобы увидеть, как оно влияет на цвет нижней границы.

Свойство CSS border-bottom-color позволяет вам установить цвет нижней границы элемента.

Вы также можете использовать border-color , чтобы установить цвет для всех сторон элемента, или border-bottom , чтобы установить все свойства для нижней границы.

Если вы используете границу без указания ее цвета, она будет использовать значение currentColor (которое является значением свойства color ).

Перед отображением необходимо указать стиль границы. Для определения стиля границы можно использовать border-bottom-style или border-style .

Кроме того, ширина границы по умолчанию — , средняя . Вы можете указать ширину, используя свойства border-bottom-width или border-width .

Синтаксис

border-bottom-color: <цвет>

Возможные значения

цвет
Задает цвет нижней границы. Это должен быть действительный цвет .

Кроме того, все свойства CSS также принимают следующие значения ключевых слов для всего CSS в качестве единственного компонента значения своего свойства:

начальный
Представляет значение, указанное в качестве начального значения свойства.
наследовать
Представляет вычисленное значение свойства родительского элемента.
снято
Это значение действует как наследовать или начальное , в зависимости от того, унаследовано свойство или нет.Другими словами, он устанавливает для всех свойств их родительское значение, если они наследуются, или их начальное значение, если они не наследуются.

Общая информация

Начальное значение
Использует значение currentColor (которое является значением свойства color ).
Относится к
Все элементы.
Унаследовано?
Нет
Медиа
Визуальный
Анимационный
Да (см. Пример)

Пример кода

div.bottom-color { цвет нижней границы: # ff9900; }

Официальные спецификации

CSS свойство border-bottom-color


Пример

Установите цвет нижней границы:

п {
стиль границы: твердый;
цвет нижней границы: # ff0000;
}

Попробуй сам »

Определение и использование

Свойство border-bottom-color устанавливает цвет нижней границы элемента.

Примечание: Всегда объявляйте свойство border-style до border-bottom-color свойство. Прежде чем вы сможете изменить цвет, элемент должен иметь границы.

Значение по умолчанию: Текущий цвет элемента
Унаследовано:
Анимация: да. Прочитать о animatable Попробуй это
Версия: CSS1
Синтаксис JavaScript: объект .style.borderBottomColor = «синий» Попробуй это

Поддержка браузера

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Имущество
цвет нижней границы 1,0 12,0 4.0 1,0 1,0 3,5

Синтаксис CSS

граница нижнего цвета: цвет | прозрачный | начальный | наследование;

Стоимость недвижимости

Значение Описание Играй
цвет Задает цвет фона. смотреть на CSS Color Values ​​для получения полного списка возможных значений цвета.По умолчанию color — цвет элемента Играй »
прозрачный Указывает, что цвет границы должен быть прозрачным Играй »
начальный Устанавливает для этого свойства значение по умолчанию. Читать о начальных Играй »
унаследовать Наследует это свойство от своего родительского элемента.Читать о унаследовать

Связанные страницы

Учебное пособие по CSS: Граница CSS

Ссылка CSS: свойство border-bottom

Ссылка

HTML DOM: borderBottomColor свойство


CSS свойство border-bottom — Tutorial Republic

Тема: Справочник по свойствам CSS3 Пред. | След.

Описание

Свойство CSS border-bottom устанавливает ширину, стиль и цвет нижней границы элемента. Это сокращенное свойство для установки индивидуальных свойств нижней границы, то есть border-bottom-width , border-bottom-style и border-bottom-color одновременно.

В следующей таблице приведены контекст использования и история версий этого свойства.


Синтаксис

Синтаксис свойства задается следующим образом:

 нижняя граница: 
[ border-bottom-width, border-bottom-style, border-bottom-color ] | начальная | наследовать

В примере ниже показано действие свойства border-bottom .

  h2 {
    нижняя граница: 5 пикселей пунктирная # ff0000;
}
п {
    нижняя граница: 3 пикселя с точками # 00ff00;
}  

Значения свойств

В следующей таблице описаны значения этого свойства.

Значение Описание
   ширина по краю снизу   
Устанавливает ширину нижней границы элемента.
граница снизу Задает стиль линии нижней границы элемента.
цвет нижней границы Задает цвет нижней границы элемента.
начальный Устанавливает для этого свойства значение по умолчанию.
наследство Если указано, связанный элемент принимает вычисленное значение свойства своего родительского элемента border-bottom .

Совместимость с браузером

Свойство border-bottom поддерживается во всех основных современных браузерах.

Базовая поддержка —

  • Firefox 1+
  • Google Chrome 1+
  • Internet Explorer 4+
  • Apple Safari 1+
  • Opera 4+

Дополнительная литература

См. Руководство по: CSS Border, CSS3 Border.

Связанные свойства: border , border-bottom-color , border-bottom-style ,
border-bottom-width .

CSS | Свойство border-bottom-color — GeeksforGeeks

CSS | border-bottom-color Свойство

Свойство CSS border-bottom-color используется для установки цвета нижней границы элемента.Обязательно объявлять свойство border-style или border-bottom-style перед использованием свойства border-bottom-color всегда, поскольку сначала должна существовать граница, прежде чем мы изменим ее цвет.

Текущее значение элемента — цвет этого свойства по умолчанию. CSS-свойство border-bottom-property можно анимировать, но не может быть унаследовано.

Синтаксис

граница нижнего цвета: цвет | прозрачный | начальный | наследование;
 

Значения свойств: Значения свойства border-bottom-color перечислены ниже:

  • цвет: Определяет цвет нижней границы.
  • transparent: Указывает, что цвет границы должен быть прозрачным.
  • начальное: Используется для установки значения по умолчанию.
  • inherit: Используется, когда элемент наследует это свойство от своего родительского элемента.

Пример:

< HTML >

< голова >

< титул >

CSS | border-bottom-color Свойство

титул >

< стиль >

h2 {

border-bottom-style: сплошной;

цвет нижней границы: зеленый;

}

дел {

бордюр: сплошной;

цвет нижней границы: зеленый;

}

стиль >

головка >

< корпус >

< h2 > GeeksforGeeks h2 >

< div > Я div с зеленой нижней границей. div >

корпус >

html >

Выход:

Поддерживаемые браузеры: Браузеры, поддерживаемые свойством border-bottom-color , перечислены ниже:

  • Google Chrome 1.0
  • Internet Explorer 4.0
  • Firefox 1.0
  • Safari 1.0
  • Opera 3.5

CSS свойство border-bottom-color

Определение

Свойство CSS border-bottom-color позволяет нам указать цвет нижней границы для элемента.

Стоимость недвижимости

цвет - определяет цвет нижней границы.

Допустимые значения для ключевых слов color : бирюзовый, черный, синий, фуксия, серый, зеленый, салатовый, бордовый, темно-синий оливковый, оранжевый, фиолетовый, красный серебро, бирюзовый, белый и желтый.

Цвета также могут быть выражены в шестнадцатеричном формате или в форматах RGB.

inherit - свойства цвета фона наследуются от родительский элемент.

transparent - Прозрачная рамка, которая может иметь ширину.

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

Если цвет границы не указан, пользовательские агенты будут использовать значение свойства цвета элементов.

Наследование

Свойство border-bottom-color НЕ наследуется от родительского элемента, если оно не указано с помощью унаследовать значение свойства.

Аномалии браузера

IE5, IE6 и IE7 не поддерживают значение наследуемого свойства.
IE8 использует действительный! DOCTYPE.
IE9 + поддерживает значение наследуемого свойства.

Позиция в коробке Модель

Пример

    Справочник по CSS - Свойство CSS border-bottom-color  ->  

Просмотр свойства CSS border-bottom-color

Нижняя граница следующего изображения - бирюзовая.Пирог пастухов

Нижний цвет границы следующего изображения - салатовый. Пирог пастухов

У следующего изображения цвет нижней границы установлен на прозрачный.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *