border-color

Свойство 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-анимации.

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

        
          
          <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;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать