CSS border-top-style — стиль верхньої межі

Властивість border-top-style встановлює стиль верхньої межі елементу.

Цікаво те, що специфікація не визначає як межі з різними стилями поєднуються в кутах між собою.

правити

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

правити

Порада

Ви також можете використовувати border-style, щоб задати стилі для всіх меж елементу, або border-top, щоб задати всі властивості для верхньої межі.

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

Порада

Значення без задання дорівнює medium. Ви можете змінити ширину межі за допомогою властивостей border-left-width або border-width.

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

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

Синтаксис

border-top-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

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

none

Кордон не відображається. Без задання.

автор: Svitlana

правити

hidden

Майже те саме що й none, за винятком вирішення конфліктів кордонів для елементів таблиці.

автор: Svitlana

правити

dotted

Кордон з точок.

автор: Svitlana

правити

dashed

Пунктирний кордон.

автор: Svitlana

правити

solid

Суцільний кордон.

автор: Svitlana

правити

double

Подвійний кордон.

автор: Svitlana

правити

groove

Рифлений 3D кордон. Ефект залежить від значення border-color.

автор: Svitlana

правити

ridge

Ребристий 3D кордон. Ефект залежить від значення border-color

автор: Svitlana

правити

inset

Урізаний (звеpxу-справа) 3D кордон. Ефект залежить від значення border-color.

автор: Svitlana

правити

outset

Урізаний (знизу-зліва) 3D кордон.Ефект залежить від значення border-color.

автор: Svitlana

правити

initial

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

автор: Svitlana

правити

inherit

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

автор: Svitlana

правити

Переглядачі

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

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

Переглядач
	1	1	1	9.2	12	5.5

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

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

Приклади

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

<p>Верхня межа — крапками (dotted), решта суцільні.</p>

p {
    border-style: solid;
    border-top-style: dotted;
    padding: 8px;
}

<div class="box">

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

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

<strong>border-top-style: </strong>
<select class="input" id="select">
  <option value="solid" name="value2" selected>solid</option>
  <option value="dashed" name="value2">dashed</option>
  <option value="dotted" name="value2">dotted</option>
  <option value="double" name="value2">double</option>
  <option value="groove" name="value2">groove</option>
  <option value="ridge" name="value2">ridge</option>
  <option value="inset" name="value2">inset</option>
  <option value="outset" name="value2">outset</option>
  <option value="none" name="value2">none</option>
</select> 
<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;
  width: 100px;
}

document.querySelectorAll('.input').forEach((el) => el.addEventListener('change', function () {
  var sel = document.querySelector('#select').selectedOptions[0].textContent;
  document.querySelectorAll('.box').forEach((n) => n.style.setProperty('border-top-style', sel));
}));

<div class="row">
    <div class="box none">width: 6px, стилю немає</div>
    <div class="box solid">solid</div>
    <div class="box dashed">dashed</div>
    <div class="box dotted">dotted</div>
    <div class="box double">double</div>
</div>

body {
    font-family: monospace;
    font-size: 13px;
    padding: 16px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.box {
    width: 150px;
    padding: 12px;
    background: #f7f7f7;
    border-top-width: 6px;
    border-top-color: #c9a227;
}

.solid {
    border-top-style: solid;
}

.dashed {
    border-top-style: dashed;
}

.dotted {
    border-top-style: dotted;
}

.double {
    border-top-style: double;
}

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

<div class="wrapper">
    <div class="block"></div>
    <div class="block dashed">border-top-style: dashed;</div>
    <div class="block dotted">border-top-style: dotted;</div>
    <div class="block double">border-top-style: double;</div>
    <div class="block groove">border-top-style: groove;</div>
    <div class="block ridge">border-top-style: ridge;</div>
    <div class="block inset">border-top-style: inset;</div>
    <div class="block outset">border-top-style: outset;</div>  
    <div class="block none">border-top-style: none;</div>
</div>

* {
    box-sizing: border-box;
}

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

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

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

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

.block {
    width: 150px;
    height: 150px;
    background-color: gold;
    border: 10px solid #444;
    margin-bottom: 20px;
}

.block.dashed {
    border-top-style: dashed;
}

.block.dotted {
    border-top-style: dotted;
}

.block.double {
    border-top-style: double;
}

.block.groove {
    border-top-style: groove;
}

.block.ridge {
    border-top-style: ridge;
}

.block.inset {
    border-top-style: inset;
}

.block.outset {
    border-top-style: outset;
}

.block.none {
    border-top-style: none;
}

<div class="content">
  <p>Верхня межа цього елементу стилізована <br> за допомогою властивості <strong><code>border-top-style</code></strong>.</p>
</div>

.content {
  font-family: sans-serif;
  line-height: 1.45;
  font-size: 17px;
  
  border-top-width: 10px;
  border-top-color: #666;
  border-top-style: double;
}

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

.block {
	width: 300px;
	height: 200px;
	background-color: #ddd;
	border: 12px solid #666;
	border-top-style: dashed;
}