border-top-color в CSS — колір верхньої межі блока

HTML

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

CSS

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

HTML

<p class="cap">Основи (блоки лежать на синьому тлі):</p>
<div class="stage">
    <span class="bx cc">currentColor</span>
    <span class="bx nostyle">колір без стилю</span>
    <span class="bx tr">transparent — видно золоте</span>
    <span class="bx trclip">padding-box — видно синє</span>
</div>

<p class="cap">border-color: чотири значення за годинниковою стрілкою від верху:</p>
<div class="four">верх · право · низ · ліво</div>

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

<p class="cap">Стрілки з нічого:</p>
<div class="row">
    <span class="arrow down"></span>
    <span class="arrow up"></span>
</div>

CSS

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

.row,
.stage {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
}

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

.bx {
    padding: 8px 10px;
    background: #f2b134;
    border-top: 14px solid;
    font: 13px/1.3 system-ui, sans-serif;
}

.cc {
    color: #c0392b;
}

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

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

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

.four {
    width: 220px;
    padding: 14px;
    background: #eef1f5;
    border: 14px solid;
    border-color: #c0392b #d67c1c #2f6fd0 #72b043;
    font: 13px/1.4 system-ui, sans-serif;
}

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

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

.upper {
    border-bottom-color: #c0392b;
}

.lower {
    border-top-color: #2f6fd0;
}

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

.down {
    border-top-color: #c0392b;
}

.up {
    border-bottom-color: #2f6fd0;
}

HTML

<div class="box">

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

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

<strong>border-top-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-top-color', color));
}));

HTML

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

<div class="wrapper">
	<div class="block"></div>
	<div class="block solid"></div>
	<div class="block dotted"></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;
}

.block.solid {
	border-top: 16px solid #444;
}

.block.dotted {
	border-top: 16px dotted #444;
}

HTML

<div class="block">
  <p><em>border-top-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-top-color: #ff0000;
}

HTML

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

CSS

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

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

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