border-top-width в CSS — товщина верхньої межі блока
Властивість border-top-width дозволяє встановити товщину верхньої межі елементу.
Ви також можете використовувати border-width, щоб задати товщину для всіх меж елементу, або border-top, щоб задати всі властивості для верхньої межі.
Значення без задання дорівнює medium.
Загальний опис
автор: NagarD
- Порада
-
Завжди оголошуйте властивість кордону стилю до властивості
автор: Svitlanaborder-top-width. Елемент повинен мати кордони, перш ніж Ви зможете змінити їх товщину. - Порада
-
Для того, щоб показати межу, обов’язково потрібно її стилізувати, за допомогою
автор: Svitlanaborder-top-styleабоborder-style. - Нотатка
-
Специфікація не визначає чітко товщину кожного з ключових слів (
автор: Svitlanathin, medium, thick). Проте вимагає, щоб вони розташовувалися один за одним:thin ≤ medium ≤ thick, та мали постійне значення в межах одного документу.
Синтаксис
border-top-width: medium|thin|thick|length|initial|inherit;Властивість border-top-width може отримувати 6 значень:
-
medium -
Лінія середньої товщини (3 пікселі). Без задання.
автор: Svitlana -
thin -
Тонка лінія. Значення в пікселях може змінюватися в залежності від браузера, але зазвичай становить 1 піксель
автор: Svitlana -
thick -
Товста лінія (6 пікселів)
автор: Svitlana -
length -
Для точного встановлення товщини можна використовувати будь-які одиниці виміру прийняті в CSS.
автор: Svitlana -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивості від свого батьківського елемента.
автор: Svitlana
| Значення без задання: | medium |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.borderTopWidth="5px" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 3.5 | 12 | 4 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 2.2 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Товщина лише верхньої межі: 15px проти типової в інших сторін.
HTML
<p>Верхня межа — 15 пікселів, решта типової товщини.</p>CSS
p {
border-style: solid;
border-top-width: 15px;
padding: 8px;
}Угорі — три ключові слова й дві пастки: товщина без стилю та відсоток, який браузер відкидає до medium. Унизу — склеювання відступів: у лівому блоці відступ першої дитини виходить назовні, у правому та сама межа завтовшки 1px тримає його всередині, і блок стає на 30px вищим.
HTML
<p class="cap">Ключові слова й пастки (стиль скрізь solid, крім двох останніх):</p>
<div class="row">
<span class="bx thin">thin — 1px</span>
<span class="bx medium">medium — 3px</span>
<span class="bx thick">thick — 5px</span>
<span class="bx nostyle">8px без стилю</span>
<span class="bx percent">50% — недійсно</span>
</div>
<p class="cap">Склеювання відступів: та сама дитина з margin-top: 30px</p>
<div class="par">
<div class="kid">дитина</div>
</div>
<p class="note">Межі немає — відступ дитини вийшов назовні й посунув сам зелений
блок; заввишки той лишився 20px, рівно як дитина.</p>
<div class="par bordered">
<div class="kid">дитина</div>
</div>
<p class="note">Додано border-top: 1px solid — той самий відступ опинився
всередині, і блок став на 30px вищим.</p>CSS
.cap {
margin: 16px 0 6px;
font: 600 .9em/1.4 system-ui, sans-serif;
color: #5a6472;
}
.bx {
display: inline-block;
margin: 0 10px 10px 0;
padding: 8px 10px;
background: #eef1f5;
border-top-color: #c0392b;
border-top-style: solid;
font: 13px/1.3 system-ui, sans-serif;
}
.thin { border-top-width: thin; }
.medium { border-top-width: medium; }
.thick { border-top-width: thick; }
.nostyle {
border-top-style: none;
border-top-width: 8px;
}
.percent {
border-top-width: 50%;
}
.par {
width: 200px;
background: #cfe8d8;
}
.bordered {
border-top: 1px solid #2f6fd0;
}
.kid {
margin-top: 30px;
height: 20px;
background: #f2b134;
font: 12px/20px system-ui, sans-serif;
text-align: center;
}
.note {
max-width: 460px;
margin: 8px 0 0;
color: #5a6472;
font: .9em/1.5 system-ui, sans-serif;
}Динамічний приклад
HTML
<div class="box">
<p>У цьому прикладі, Ви можете змінювати значення для властивості <strong>border-top-width</strong>.</p>
<p>Вона встановлює ширину верхнього кордону елемента.</p>
<strong>border-top-width: </strong>
<input type="number" class="input" id="num" value="24" min="0">px
<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: 16px solid #444;
border-top-width: 24px;
}
.input {
margin-bottom: 36px;
width: 75px;
}
#select {
position: relative;
top: -4px;
width: 100px;
}JS
document.querySelectorAll('.input').forEach((el) => el.addEventListener('change', function () {
var num = document.querySelector('#num').value;
document.querySelectorAll('.box').forEach((n) => n.style.setProperty('border-top-width', num + 'px'));
}));Демонстрація роботи властивості
HTML
<div class="info">
<p>За допомогою властивості <code>border-top-width</code> ми можемо визначити ширину верхнього кордону елемента.</p>
<p>Ви бачите три блоки з ідентичним загальним кордоном, але два останніх мають іншу ширину для верхнього.</p>
</div>
<div class="wrapper">
<div class="block"></div>
<div class="block one"></div>
<div class="block two"></div>
</div>CSS
* {
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 #444;
}
.block.one {
border-top-width: 40px;
}
.block.two {
border-top-width: 4px;
}Демонстрація роботи властивості
HTML
<div class="content">
<p>Товщина верхньої межі цього елементу стилізована <br> за допомогою властивості <strong><code>border-top-width</code></strong>.</p>
</div>CSS
.content {
font-family: sans-serif;
line-height: 1.45;
font-size: 17px;
width: 500px;
border-top-width: 4px;
border-top-color: #666;
border-top-style: solid;
}Приклад використання властивості
HTML
<div class="block"></div>CSS
.block {
width: 300px;
height: 200px;
background-color: #ddd;
border: 4px solid #666;
border-top-width: 16px;
}Коментарі
Коментарів ще немає — будьте першим!