border-color

Базовая Широко доступная

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

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

Попробуйте

Каждую сторону можно задать индивидуально, используя border-top-color, border-right-color, border-bottom-color и border-left-color; или используя учитывающие режим записи border-block-start-color, border-block-end-color, border-inline-start-color и border-inline-end-color.

Дополнительную информацию о цветах границ можно найти в разделе Применение цветов к HTML-элементам.

Составные свойства

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

Синтаксис

/* <color> values */
border-color: red;

/* top and bottom | left and right */
border-color: red #f015ca;

/* top | left and right | bottom */
border-color: red rgb(240 30 50 / 70%) green;

/* top | right | bottom | left */
border-color: red yellow green blue;

/* Global values */
border-color: inherit;
border-color: initial;
border-color: revert;
border-color: revert-layer;
border-color: unset;

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

При указании одного значения, цвет применяется ко всем четырём сторонам.
При указании двух значений, первый цвет применяется к верхней и нижней сторонам, второй к левой и правой.
При указании трёх значений, первый цвет применяется к верхней стороне, второй к левой и правой, третий к нижней.
При указании четырёх значений, цвета применяются к верхней, правой, нижней и левой сторонам в указанном порядке (по часовой стрелке).

Значения

<color>: Определяет цвет границы.

Формальное определение

Начальное значение	как каждое из свойств сокращенного обозначения: `border-top-color`: `currentcolor` `border-right-color`: `currentcolor` `border-bottom-color`: `currentcolor` `border-left-color`: `currentcolor`
Применимо к	всем элементам. Также применимо к `::first-letter`.
Наследуется	нет
Вычисленное значение	как каждое из свойств сокращенного обозначения: `border-bottom-color`: вычисленное значение цвета `border-left-color`: вычисленное значение цвета `border-right-color`: вычисленное значение цвета `border-top-color`: вычисленное значение цвета
Тип анимации	как каждое из свойств сокращенного обозначения: `border-bottom-color`: значение цвета `border-left-color`: значение цвета `border-right-color`: значение цвета `border-top-color`: значение цвета

Формальный синтаксис

border-color = 
  [ <color> | <image-1D> ]{1,4}  

<image-1D> = 
  <stripes()>  

<stripes()> = 
  stripes( <color-stripe># )  

<color-stripe> = 
  <color>                            &&
  [ <length-percentage> | <flex> ]?  

<length-percentage> = 
  <length>      |
  <percentage>

Примеры

Полное использование border-color

HTML

<div id="justone">
  <p><code>border-color: red;</code> is equivalent to</p>
  <ul>
    <li><code>border-top-color: red;</code></li>
    <li><code>border-right-color: red;</code></li>
    <li><code>border-bottom-color: red;</code></li>
    <li><code>border-left-color: red;</code></li>
  </ul>
</div>
<div id="horzvert">
  <p><code>border-color: gold red;</code> is equivalent to</p>
  <ul>
    <li><code>border-top-color: gold;</code></li>
    <li><code>border-right-color: red;</code></li>
    <li><code>border-bottom-color: gold;</code></li>
    <li><code>border-left-color: red;</code></li>
  </ul>
</div>
<div id="topvertbott">
  <p><code>border-color: red cyan gold;</code> is equivalent to</p>
  <ul>
    <li><code>border-top-color: red;</code></li>
    <li><code>border-right-color: cyan;</code></li>
    <li><code>border-bottom-color: gold;</code></li>
    <li><code>border-left-color: cyan;</code></li>
  </ul>
</div>
<div id="trbl">
  <p><code>border-color: red cyan black gold;</code> is equivalent to</p>
  <ul>
    <li><code>border-top-color: red;</code></li>
    <li><code>border-right-color: cyan;</code></li>
    <li><code>border-bottom-color: black;</code></li>
    <li><code>border-left-color: gold;</code></li>
  </ul>
</div>

CSS

#justone {
  border-color: red;
}

#horzvert {
  border-color: gold red;
}

#topvertbott {
  border-color: red cyan gold;
}

#trbl {
  border-color: red cyan black gold;
}

/* Set width and style for all divs */
div {
  border: solid 0.3em;
  width: auto;
  margin: 0.5em;
  padding: 0.5em;
}

ul {
  margin: 0;
  list-style: none;
}

Результат

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

Спецификация
CSS Логические свойства и значения Уровень 1 # logical-shorthand-keyword
CSS Модуль фона и границ Уровень 3 # border-color

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

	Рабочие столы					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`border-color`	1	12	1	3.5	1	18	4	10.1	1	1.0	4

См. также

Связанные со свойством border-color CSS свойства: border, border-top-color, border-right-color, border-bottom-color, border-left-color,
Другие связанные с границами CSS свойства: border-width, border-style
Тип данных <color>
Другие связанные с цветом свойства: color, background-color, outline-color, text-decoration-color, text-emphasis-color, text-shadow, caret-color, и column-rule-color
Применение цвета к HTML-элементам с помощью CSS

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/border-color