border-color

Какого цвета будет рамка вокруг элемента? Решать вам!

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Свойство border-color управляет цветом рамки элемента.

Пример

Секция статьи "Пример"

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

        
          
          <p class="text">Блок текста, обведённый рамкой</p>
          <p class="text">Блок текста, обведённый рамкой</p>

        
        
          
        
      
        
          
          .text {  border-style: solid;  border-color: tomato;}
          .text {
  border-style: solid;
  border-color: tomato;
}

        
        
          
        
      
Открыть демо в новой вкладке

Как пишется

Секция статьи "Как пишется"

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

  1. border-color: tomato — одно значение, цвет рамки со всех сторон одинаковый.
  2. border-color: tomato skyblue — два значения, первое устанавливает цвет рамки сверху и снизу, второе — слева и справа.
  3. border-color: tomato skyblue olive — три значения, первое значение устанавливает цвет рамки сверху, второе — слева и справа, а третье — снизу.
  4. border-color: tomato skyblue olive silver — четыре значения, устанавливает для каждой стороны свой цвет, поочерёдно: для верхней, правой, нижней и левой рамки.
Открыть демо в новой вкладке

Разрешается использование названий цветов, форматов HEX, RGB, HSL, а также ключевых слов transparent (для прозрачной рамки) или inherit (для наследования значения родителя).

Подсказки

Секция статьи "Подсказки"

💡 Свойство не наследуется.

💡 Значение по умолчанию соответствует значению color у элемента.

💡 Можно анимировать, читайте подробнее про CSS-анимации.

💡 Поддерживается всеми современными браузерами.

На практике

Секция статьи "На практике"

Максим Печёрин советует

Секция статьи "Максим Печёрин советует"

🛠 Чаще всего это свойство используется в шорткате border, а отдельно пишется, если все свойства рамки сохраняются, а цвет нужно изменить, например по событию :hover или :focus. Или когда вы используете методологию БЭМ, и все свойства рамки прописаны у элемента, а цвет рамки — у модификатора. Вот пример:

        
          
          <div class="block">  <p class="block__element">Текст</p>  <p class="block__element block__element--modify">Текст с модификатором</p></div>
          <div class="block">
  <p class="block__element">Текст</p>
  <p class="block__element block__element--modify">Текст с модификатором</p>
</div>

        
        
          
        
      
        
          
          .block__element {  border-width: 1px;  border-style: solid;}.block__element--modify {  border-color: tomato;}
          .block__element {
  border-width: 1px;
  border-style: solid;
}

.block__element--modify {
  border-color: tomato;
}