CSS border-color — колір рамки елемента

Властивість border-color встановлює колір всіх кордонів елемента. Властивість може мати одночасно до чотирьох значень.

border-color - це властивість для скороченого запису border-top-color, border-right-color, border-bottom-color, border-left-color. Якщо ви хочете задати колір тільки для деяких меж (але не всіх відразу), то краще використовувати вище згадані властивості.

Значення без задання currentColor (який дорівнює властивості color).

Від кількості аргументів змінюється їх призначення

Приклади:

1. border-color:red green blue pink;
   • верхній кордон червоний
   • правий кордон зелений
   • нижній кордон блакитний
   • лівий кордон рожевий
2. border-color:red green blue;
   • верхній кордон червоний
   • правий та лівий кордони зелені
   • нижній кордон блакитний
3. border-color:red green;
   • верхній та нижній кордони червоні
   • лівий та правий праві кордони зелені
4. border-color:red;
   • всі кордони червоні

правити

Загальний опис

правити

Нотатка

Ви маєте впевнитися, що border-width не дорівнює 0, а border-style не дорівнює none або hidden, щоб показати межу.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

border-bottom-color: color|transparent|initial|inherit;

Властивість border-color може отримувати 4 значень:

color

Встановлює колір кордону. Колір в стилях можна задавати різними способами: за шістнадцятиричним кодом, за назвою, в форматі RGB, RGBA, HSL, HSLA

автор: Svitlana

правити

transparent

Встановлює прозорий колір

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання

автор: Svitlana

правити

inherit

Вказує на спадковість властивостей від свого батьківського елемента

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	3.5	12	4

Підтримка: мобільні переглядачі

Переглядач
	4	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

<p>Верх і низ — червоні, боки — сині.</p>

p {
    border-style: solid;
    border-color: #ff0000 #0000ff;
    padding: 8px;
}

<div class="row">
    <div class="box only-color">лише border-color</div>
    <div class="box with-style">border-color + border-style</div>
    <div class="box current">currentColor</div>
</div>

body {
    font-family: sans-serif;
    font-size: 15px;
    padding: 20px;
}

.row {
    display: flex;
    gap: 20px;
}

.box {
    width: 150px;
    padding: 14px;
    border-width: 3px;
}

.only-color {
    border-color: #d93526;
}

.with-style {
    border-color: #d93526;
    border-style: solid;
}

.current {
    color: #0172ad;
    border-style: dashed;
}

<div class="box">

<p>У цьому прикладі, Ви можете змінювати значення для властивості <strong>border-right-color</strong>.</p>

<p>Вона встановлює колір для правого кордону елемента на сторінці.</p>

<strong>border-right-color: </strong>
<input type="color" class="input" id="color" value="#F74C32">
<strong>;</strong>
  
</div>

* {
  box-sizing: border-box;
}

body {
  font-family: monospace;
  font-size: 16px;
  line-height: 1.45;
  height: 100vh;
  padding: 16px;
}

.box {
  background-color: #f7f7f7;
  padding: 16px;
  border: 8px solid #F74C32;
}

.input {
  margin-bottom: 36px;
  width: 75px;
}

#select {
  position: relative;
  top: -4px;
  width: 100px;
}

document.querySelectorAll('.input').forEach((el) => el.addEventListener('change', function () {
  var color = document.querySelector('#color').value;
  document.querySelectorAll('.box').forEach((n) => n.style.setProperty('border-right-color', color));
}));

<div class="info">
	<p>За допомогою властивості <code>border-color</code> ми можемо визначити колір кордону елемента.</p>
	<p>Кордон першого блоку має колір без задання (тобто значення властивості <code>color</code>), два інших - змінений.</p>
</div>

<div class="wrapper">
	<div class="block"></div>
	<div class="block one"></div>
	<div class="block two"></div>
</div>

* {
	box-sizing: border-box;
}

body {
	font-family: monospace;
	font-size: 17px;
	line-height: 1.45;
}

.info {
	padding: 4px 16px 8px 16px;
}

code {
	font-weight: 700;
	color: #444;
	border-bottom: 2px solid #666;
}

.wrapper {
	display: flex;
	justify-content: space-around;
}

.block {
	width: 150px;
	height: 150px;
	background-color: gold;
	border: 16px solid;
}

.block.one {
	border-color: #ff0000;
}

.block.two {
	border-color: green;
}

<div class="block">
  <p>Задаємо колір за допомогою <strong><code>border-color</code></strong></p>
</div>

.block {
  font-family: sans-serif;
  line-height: 1.45;
  font-size: 17px;
  padding: 12px;
  
  border-width: 8px;
  border-color: cyan;
  border-style: solid;
}

<div class="block"></div>

.block {
  width: 300px;
  height: 200px;
  background-color: #ddd;
  border-width: 10px;
  border-style: solid;
  border-color: green;
}