Border color: CSS border-color property

border-color — цвет рамки | CSS справочник

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

12.0+	4.0+	1.0+	1.0+	3.5+	1.0+

Описание

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

Пример:

• border-color: red green blue pink;
  • Верхняя рамка — красная
  • Правая рамка — зеленая
  • Нижняя рамка — синяя
  • Левая рамка — розовая
• border-color: red green blue;
  • Верхняя рамка — красная
  • Правая и левая рамка — зеленые
  • Нижняя рамка — синяя
• border-color: red green;
  • Верхняя и нижняя рамка — красные
  • Правая и левая рамка — зеленые
• border-color: red;
  • Все 4 рамки — красные

Примечание: свойство border-color используется только в паре с border-style, так как без него, оно не даст никакого эффекта.

Значение по умолчанию:	совпадает с цветом текста
Применяется:	ко всем элементам, а также к псевдо-элементу ::first-letter
Анимируется:	да
Наследуется:	нет
Версия:	CSS1
Синтаксис JavaScript:	object.style.borderColor=»#FF0000 blue»

Синтаксис

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

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

Значение	Описание
цвет	Цвет рамки, который можно установить различными способами, например: указать название цвета, использовать шестнадцатеричные значения (HEX) или с помощью синтаксиса RGB.
transparent	Указывает, что цвет рамки должен быть прозрачным.
inherit	Указывает, что значение наследуется от родительского элемента.

Пример

border-color:

red

blue

red green blue yellow

red green

#000000

#ff9900

rgb(255,255,255)

rgb(255,130,255)

transparent

div {
border-style: solid;
border-width: 5px;
border-color: red;
}

Свойство 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,
  которое является свойством-сокращением для границы

»

В атрибутах HTML

Раскрытие информации: Ваша поддержка помогает сайту работать! Мы зарабатываем комиссионные за некоторые услуги, которые мы рекомендуем на этой странице. Узнать больше

Атрибут

Пример кода для Tr в HTML (для организации строк таблицы)

Что делает ?

Задает цвет всех внутренних границ строки таблицы.

Пример кода

 <таблица>
  
    Первый столбец
    Второй столбец
    Третья колонка
  
  
    Первый столбец
    Второй столбец
    Третья колонка
  
  
    Первый столбец
    Второй столбец
    Третья колонка
  
 

90 033

Первый столбец	Второй столбец	Третий столбец
Первый столбец	Второй столбец	Третий столбец
Первый столбец	Второй столбец	Третий столбец

Граница таблицы стилей Цвета

Когда-то атрибут bordercolor можно было использовать для установки цвета границ, появляющихся между элементами в строке таблицы. Однако большинство современных браузеров больше не поддерживают этот атрибут. Вместо использования HTML-атрибутов для управления стилем границ таблицы правильный способ оформления границ таблицы — использование CSS. Наш учебник по стилю таблиц научит вас, как стилизовать HTML-таблицы и убедиться, что они красиво отображаются на устройстве любого размера. Для достижения эффекта, который ранее достигался с bordercolor вы можете использовать следующий стиль CSS.

  
 
Первый столбец
Второй столбец
Третий столбец
 
Первый столбец 
Второй столбец
Третий столбец
 
Первый столбец
Второй столбец
 Третий столбец
 
 

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

. example-table td:nth-child(n+2){border-left: 2px сплошной зеленый;}

Первый столбец	Второй столбец	Третий столбец
Первый столбец	Второй столбец	Третий столбец
Первый столбец	Второй столбец	Третий столбец

Адам Вуд

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

border-color · WebPlatform Docs

Резюме

Свойство CSS border-color задает цвет четырех границ элемента. Это свойство может иметь от одного до четырех значений, состоящих из элементарных свойств:

• border-top-color
• граница правого цвета
• цвет нижней границы
• граница левого цвета

Цветом по умолчанию является текущий цвет каждого из этих значений.

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

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

Исходное значение

цвет: Значение свойства 'color' для каждой из сторон границы: border-top-color, border-right-color, border-bottom-color и border-left-color.

Применяется к

Все элементы

Унаследовано

Нет

СМИ

визуальный

Расчетное значение

Посмотреть отдельные свойства

Анимируемый

Да

Свойство объектной модели CSS

цвет границы

Проценты

Н/Д

Синтаксис

• цвет границы: <цвет>
• цвет границы: currentColor
• цвет границы: наследовать
• Цвет рамки: прозрачный

Значения

<цвет>

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

унаследовать

Ключевое слово, указывающее, что все четыре значения наследуются от вычисляемого значения родительского элемента.

прозрачный

Будет применена невидимая граница, но к ней может быть применена ширина.

текущий цвет

То же, что и «цвет: наследовать», значение цвета, унаследованное от родительского объекта.

Примеры

Простой пример, показывающий, как использовать свойство border-color для элементов div HTML.

 .один {
          цвет: #6CC644;
          кайма: среднеплотная;
        }
        /* Вы можете использовать другой цвет с каждой стороны */
        .два {
          граница: сплошная 10 пикселей;
          цвет границы: #6CC644 #FFC621 #DE6525 #256A84;
        }
        /* Вы можете использовать другой цвет для других стилей */
        .три {
          ширина границы: 5px;
          бордюрный стиль: ребро пунктирное сплошное;
          цвет границы: #6CC644 #DE6525;
        }
        /* Вы можете установить горизонталь и вертикаль, используя только два значения цвета (горизонтальный сначала, затем вертикальный) */
        .  четыре {
            ширина границы: 3px;
            стиль границы: сплошной;
            цвет границы: #ccc #666;
        }
 

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

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

 Значением цвета может быть ключевое слово свойства, расширенное ключевое слово или числовое значение. Два ключевых слова свойства — это 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%)
• HSL, например hsl(0, 100%, 50%, 1)

Значение цвета также может быть расширенным ключевым словом, таким как aliceblue или lavenderblush.