border-right-color у CSS — колір правої межі елемента

HTML

<p>Права межа червона, решта — чорні.</p>

CSS

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

HTML

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

CSS

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

JS

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

HTML

<div class="stage">
    <div class="k cc">currentColor — колір тексту</div>
    <div class="k nostyle">колір без стилю — нічого</div>
    <div class="k tr">transparent — видно власне біле тло</div>
    <div class="k trclip">transparent + padding-box — видно синє</div>
    <div class="k semi">rgba(192, 57, 43, .4) — змішано з білим</div>
    <div class="k after">колір, потім border-right — чорний</div>
    <div class="k before">border-right, потім колір — малиновий</div>
</div>

<p class="cap">Склеєна таблиця: обидві межі по 8px solid, виграє ліва комірка:</p>
<table>
    <tr>
        <td class="red">права межа червона</td>
        <td class="green">ліва межа зелена</td>
    </tr>
</table>

<p class="cap">Стрілка з нічого: три межі прозорі, права пофарбована:</p>
<span class="arrow"></span>

CSS

.stage {
    padding: 14px;
    background: #2f6fd0;
}

.k {
    margin-bottom: 8px;
    padding: 8px 10px;
    background: #fff;
    border-right: 16px solid;
    width: 320px;
    font: 13px/1.3 system-ui, sans-serif;
}

.cc {
    color: #c0392b;
}

.nostyle {
    border-right-style: none;
    border-right-color: #c0392b;
}

.tr {
    border-right-color: transparent;
}

.trclip {
    border-right-color: transparent;
    background-clip: padding-box;
}

.semi {
    border-right-color: rgba(192, 57, 43, .4);
}

.after {
    border-right-color: crimson;
    border-right: 16px solid;
}

.before {
    border-right: 16px solid;
    border-right-color: crimson;
}

.cap {
    margin: 20px 0 8px;
    font: 600 .9em/1.4 system-ui, sans-serif;
    color: #5a6472;
}

table {
    border-collapse: collapse;
    font: 13px/1.4 system-ui, sans-serif;
}

td {
    padding: 10px 14px;
    background: #eef1f5;
    border: 8px solid #b9c6d8;
}

.red {
    border-right-color: #c0392b;
}

.green {
    border-left-color: #72b043;
}

.arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border: 30px solid transparent;
    border-right-color: #f2b134;
}

HTML

<div class="info">
	<p>За допомогою властивості <code>border-right-color</code> ми можемо встановити колір для правого кордону елементу.</p>
	<p>Ви бачите три блоки з ідентичним загальним кордоном, але різними кольорами для правого.</p>
</div>

<div class="wrapper">
	<div class="block solid"></div>
	<div class="block rgba"></div>
	<div class="block word"></div>
</div>

CSS

* {
	box-sizing: border-box;
}

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

.info {
	padding: 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 #444;
}

.block.solid {
	border-right-color: #ff0000;
}

.block.rgba {
	border-right-color: rgba(0, 0, 0, .45);
}
.block.word {
	border-right-color: green;
}

HTML

<div class="block">
  <p><em>border-right-color</em> змінює колір тільки правої межі. Всі інші стилізуються від <em>border</em>.</p>
</div>

CSS

.block {
  height: 250px;
  width: 500px;
  background-color: #ddd;
  
  text-align: center;
  line-height: 1.45;
  font-size: 18px;
  font-family: monospace;
  padding: 6%;
  box-sizing: border-box;
  
  border: 12px solid #252525;
  border-right-color: #ff0000;
}

HTML

<div class="block">
	<code>border-right-style: solid;<br>
	<strong>border-right-color: #666;</strong> </code>
</div>

CSS

.block {
	width: 400px;
	height: 250px;
	background-color: #eee;

	border-right-style: solid;
	border-right-color: #666;

	text-align: center;
	padding-top: 18%;
	box-sizing: border-box;
	line-height: 1.45;
	font-size: 17px;
}