Клавиша / esc

border-color

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

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

Кратко

Скопировано

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

Пример

Скопировано

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

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

        
        
          
        
      
        
          
          p {  border-style: solid;  border-color: #2E9AFF;}
          p {
  border-style: solid;
  border-color: #2E9AFF;
}

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

Как пишется

Скопировано

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

  1. border-color: #2E9AFF — одно значение, цвет рамки со всех сторон одинаковый.
  2. border-color: #2E9AFF #F498AD — два значения, первое устанавливает цвет рамки сверху и снизу, второе — слева и справа.
  3. border-color: #2E9AFF #F498AD #FF8630 — три значения, первое значение устанавливает цвет рамки сверху, второе — слева и справа, а третье — снизу.
  4. border-color: #2E9AFF #F498AD #FF8630 #41E847 — четыре значения, устанавливает для каждой стороны свой цвет, поочерёдно: для верхней, правой, нижней и левой рамки.
Открыть демо в новой вкладке

Разрешается любое доступное обозначение цвета в вебе, а также ключевые слова 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;
}