border-color в CSS


border-color

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

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

Тип свойства

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

Значения

Значением свойства CSS border-color является указание цвета рамки одним из следующих способов:

  • Имя цвета — Многие цвета имеют имена, которые браузеры понимают, например: red, green, blue.
  • HEX-код цвета — Шестнадцатеричное значение цвета, перед которым ставится знак решетка (#). Каждый HEX-код состоит из трех пар: первая пара отвечает за красный цвет, вторая — за зеленый, третья — за синий, например: #CC9966 или #996699.
  • Цвет в формате RGB — Цвет в десятичном формате, он начинается с аббревиатуры RGB, после которой в скобках, через запятую, указываются три значения. Здесь тоже первое число отвечает за красный цвет, второе — за зеленый, третье — за синий, например: RGB(153, 204, 51).
  • transparent — прозрачный цвет, поэтому сквозь него просвечивает фон родительского элемента.
  • inherit — наследует значение CSS border-color от родительского элемента.

Процентная запись: не существует.

Значение по умолчанию: совпадает с цветом текста элемента (CSS color).

Border-color может иметь от одного до четырех (через пробел) значений цвета, при этом будут соблюдаться эти правила:

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

Синтаксис

Пример CSS: использование border-color

Результат. Использование свойства CSS border-color.

Версии CSS

Версия: CSS 1 CSS 2 CSS 2.1 CSS 3
Поддержка: Да Да Да Да

Браузеры

Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera Safari
Версия: 6.0 и 7.0 8.0 и выше 2.0 и выше 2.0 и выше 9.2 и выше 3.1 и выше
Поддержка: Частично Да Да Да Да Да

Internet Explorer 6.0 и 7.0 не понимают значение inherit . При значении transparent IE6 не делает рамку прозрачной, а окрашивает ее в серый цвет.

свойство border-color

Свойство border-color определяет цвет рамки элемента. С помощью этого свойства можно установить цвет всех границ элемента (border-top-color, border-right-color, border-bottom-color, border-left-color). Цвет рамки, по умолчанию, не наследуется и считается равным текущему значению свойства ‘color’. Цвет может задаваться любым доступным способом в соответствии со стандартом CSS 2.1 или CSS 3, либо значением inherit. В зависимости от количества заданых значений (от 1 до 4), устанавливаются цвета для разных сторон рамки:

  • Если указано единственное значение, то данная величина применяется для цвета всех сторон (border-top-color, border-right-color, border-bottom-color, border-left-color)
  • Если указано два значения, то первая величина устанавливает цвет верхней и нижней стороны (border-top-color, border-bottom-color), а вторая — для левой и правой стороны (border-left-color, border-right-color)
  • Три значения, устанавливают, соответственно, цвет границы для верхней (border-top-color), правой и левой (border-left-color, border-right-color), а также нижней (border-bottom-color) сторон.
  • Четыре значения последовательно применяются для всех сторон начиная с верхней по часовой стрелке — верхняя, правая, нижняя, левая границы.
Илон Маск рекомендует:  Описание HTML, DHTML, CSS, WML,...

Особенности:

Для браузеров на основе движка WebKit (Chrome, Safari) наблюдается баг с полупрозрачными границами блока, как видно на рисунке, если для границы блока используется полупрозрачная заливка, то в углах рамки, она наслаивается:

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

Пример

Задайте цвет для границы:

Подробнее примеры ниже.

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

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

Если свойство border-color имеет четыре значения:

  • border-color: red green blue pink;
    • top border is red
    • right border is green
    • bottom border is blue
    • left border is pink

Если свойство Color границы имеет три значения:

  • border-color: red green blue;
    • top border is red
    • right and left borders are green
    • bottom border is blue

Если свойство border-color имеет два значения:

  • border-color: red green;
    • top and bottom borders are red
    • right and left borders are green

Если свойство border-color имеет одно значение:

  • border-color: red;
    • all four borders are red

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

Значение по умолчанию: Текущий цвет элемента
Inherited: no
Animatable: yes. Читайте о animatable
Version: CSS1
Синтаксис JavaScript: object.style.borderColor=»#FF0000 blue»

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

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

СSS Свойство border-color

Пример

Установить цвет для границы:

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

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

Если свойство border-color имеет четыре значения:

  • border-color: red green blue pink;
    • верхняя граница красная
    • правая граница зеленая
    • нижняя граница синяя
    • левая граница розовая

Если свойство border-color имеет три значения:

  • border-color: red green blue;
    • верхняя граница красная
    • правая и левая границы зеленые
    • нижняя граница синяя

Если свойство border-color имеет два значения:

  • border-color: red green;
    • верхняя и нижняя границы красные
    • правая и левая границы зеленого цвета

Если свойство border-color имеет одно значение:

  • border-color: red;
    • все четыре границы красные

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

Значение по умолчанию: Текущий цвет элемента
Унаследованный: нет
Анимируемый: да. Прочитать о animatable Попробовать
Версия: CSS1
JavaScript синтаксис: object.style.borderColor=»#FF0000 blue» Попробовать
Илон Маск рекомендует:  Что такое код xml_parser_free

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

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

Свойство
border-color 1.0 4.0 1.0 1.0 3.5

CSS Синтаксис

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

Значение Описание Воспроизвести
color Задает цвет фона. Смотреть CSS Значение цвета для получения полного списка возможных значений цвета. Цвет по умолчанию черный Воспроизвести »
transparent Указывает, что цвет границы должен быть прозрачным Воспроизвести »
initial Задает для этого свойства значение индекса. Прочитать о initial Воспроизвести »
inherit Наследует это свойство от родительского элемента. Прочитать о inherit

Примеры

Пример

Установить цвет для границы с значением HEX:

Пример

Установить цвет для границы с значением RGB:

Пример

Установить цвет для границы с значением RGBA:

Пример

Установить цвет для границы с значением HSL:

Пример

Установить цвет для границы с значением HSLA:

Пример

Установить другой цвет границы для каждой стороны элемента:

CSS-свойство: border

Свойство border HTML позволяет определять стиль, ширину и цвет границы элемента. Границы элементов могут выполнять как декоративную, так и практическую функцию.

Стиль границы

Свойство border-style позволяет определить тип ( стиль ) границы.

Это свойство принимает разные значения :

  • dotted – граница в точку;
  • dashed – граница в штрих;
  • solid – цельная граница;
  • double – двойная граница;
  • groove – трёхмерная граница. Эффект зависит от того, каким будет значение свойства border-color ;
  • ridge — трёхмерная граница. Эффект зависит от того, каким будет значение свойства border-color ;
  • inset – трёхмерная утопленная граница. Эффект зависит от того, каким будет значение свойства border-color ;
  • outset — трёхмерная выпуклая граница. Эффект зависит от того, каким будет значение свойства border-color ;
  • none – отключение;
  • hidden – скрытые границы.

У свойства HTML border style может быть от одного до четырех значений ( для верхней, правой, нижней и левой стороны ).

Важно! Ни одно из приведенных выше свойств border HTML не вступит в силу, если не установлено значение border-style !

Border Width

Свойство border-width определяет ширину границы по любой из четырех сторон элемента.

Ширину можно указывать как в единицах измерения ( px, pt, cm, em и т. д. ), так и с помощью ключевых слов: thin , medium или thick .

У свойства border-width может быть от одного до четырех значений ( для верхней, правой, нижней и левой стороны ).

Border Color

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

Цвет можно указывать несколькими способами :

  • Названием – вписывается название цвета ( например, red );
  • Hex – указывается hex-значение цвета ( например, #FF0000 );
  • RGB – указывается RGB-значение цвета ( например, rgb(255,0,0) );
  • transparent ( прозрачная ).

У свойства border-color может быть от одного до четырех значений ( для верхней, правой, нижней и левой стороны ).

Если не выставить свойство border-color , то границы будут наследовать цвет элемента.

Илон Маск рекомендует:  Что такое код asp getdatapaths

Стилизация границ по-отдельности

В CSS есть свойства border HTML для определения стиля каждой стороны элемента ( top, right, bottom и left ).

Подобного результата можно добиться и следующим методом:

Как это работает

Если у свойства HTML border style будет четыре значения:

  • border-style: dotted solid double dashed ;
  • верхняя граница имеет значение dotted ;
  • правая граница имеет значение solid ;
  • нижняя граница имеет значение double ;
  • левая граница имеет значение dashed .

Если у border-style будет три значения:

  • border-style: dotted solid double ;
  • верхняя граница имеет значение dotted ;
  • правая и левая границы имеют значение solid ;
  • нижняя граница имеет значение double .

Если у border-style будет два значения:

  • border-style: dotted solid ;
  • верхняя и нижняя границы имеют значение dotted ;
  • правая и левая границы имеют значение solid .

Если у HTML border style будет одно значение:

  • border-style: dotted ;
  • то все четыре границы будут иметь значение dotted .

В примерах, приведенных выше, мы использовали свойство border-style . Но учтите, что те же правила применения касаются и border-width , и border-color .

Сокращенное свойство border

Как видно из примеров, при стилизации границ элементов нужно применять довольно много разных свойств. Чтобы сократить код, можно использовать специальное свойство border :

  • border-width ;
  • border-style ( обязательно );
  • border-color .

Это же свойство можно использовать и для стилизации границ по отдельным сторонам элемента.

border-color

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

IE Opera Chrome Firefox Safari
IE до 7.0 (включ.) не поддерживает значение inherit IE6 не поддерживает transparent + + + +

Пример

Прописываем границу вокруг элемента:

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

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

Примеры:

* border-color:red green blue pink; — верхняя граница красная — правая граница зеленая — нижняя граница синяя — левая граница фиолетовая

* border-color:red green blue; — верхняя граница красная — правая и левая границы зеленые — нижняя граница синяя

* border-color:dotted red green; — верхняя и нижняя границы красные — правая и левая границы зеленые

* border-color:red; — все четыре границы красные

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

border-color

Браузер Internet Explorer Netтscape Опера Safari Mozilla Firefox
Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Поддерживается Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да

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

CSS (ЦСС) CSS (ЦСС)1
Значение по умолчанию Значение цвета, заданное параметром color
Наследуется Нет
Применяется Ко всем элементам
Аналог ШТМЛ |
Ссылка на спецификацию http://www.w3.org/TR/CSS21/box.ШТМЛ#propdef-border-color

Описание

Устанавливает цвет границы на разных сторонах элемента. Параметр позволяет задать цвет границы сразу на всех сторонах элемента или определить цвет границы только на указанных сторонах.

Синтаксис

Аргументы

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

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL