CSS border-top — верхня рамка одним записом
border-top - це універсальна властивість для скороченого запису значень для border-top-color, border-top-style й border-top-width. Ці властивості використовуються для стилізації верхньої межі елементів.
Три значення властивості можуть писатися в будь-якій послідовності, й одне або два з них, можуть бути пропущені.
Як і усі універсальні властивості, border-top завжди встановлює значення для всіх доступних властивостей, навіть якщо вони не були вказані(у цьому випадку вони отримають значення без задання).
Наприклад, початкове значення для border-top-style дорівнює none, тобто межа не показується. У випадку відсутності значення для цієї властивості, елемент не матиме межі, навіть якщо будуть прописані border-top-color та border-top-width.
Загальний опис
автор: NagarD
Синтаксис
border-top: border-width border-style border-color|initial|inherit;Властивість border-top може отримувати 5 значень:
-
border-top-width -
Значення задає товщину кордону.
автор: Svitlana -
border-top-style -
Значення задає стиль кордону. Приймає декілька значень:
автор: Svitlanadotted,dashed,solid,double,groove,ridge,inset,outset. -
border-top-color -
Встановлює колір кордону, значення може бути в будь-якому допустимому для CSS форматі.Колір кордону.
автор: Svitlana -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивості від свого батьківського елемента
автор: Svitlana
| Значення без задання: | Залежить від використання |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.borderTop="3px dashed blue" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 3.5 | 12 | 4 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Усі межі суцільні, а border-top переписує верхню: товста, крапчаста, червона.
HTML
<p>Верхня межа — товста крапчаста червона.</p>CSS
p {
border-style: solid;
border-top: thick dotted #ff0000;
padding: 8px;
}Динамічний приклад
HTML
<div class="box">
<p>У цьому прикладі, Ви можете змінювати значення для властивості <strong>border-top</strong>.</p>
<p>Вона встановлює верхній кордон для елементу на сторінці. У цьому прикладі Ви мусите вибрати ширину кордону, його форму, а також колір.</p>
<strong>border-top: </strong>
<input type="number" class="input" id="width" value="8" min="0">px
<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>
</select>
<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-top: 8px solid #F74C32;
}
.input {
margin-bottom: 36px;
width: 75px;
}
#select {
position: relative;
width: 100px;
}JS
document.querySelectorAll('.input').forEach((el) => el.addEventListener('change', function () {
var sel = document.querySelector('#select').selectedOptions[0].textContent;
var width = document.querySelector('#width').value;
var color = document.querySelector('#color').value;
document.querySelectorAll('.box').forEach((n) => n.style.setProperty('border-top', width + 'px ' + sel + ' ' + color));
}));Ліворуч кожен пункт має межу зверху й знизу — на стиках виходить подвійна лінія. Праворуч межа лише в сусідів (li + li), і роздільники однакові.
HTML
<figure>
<ul class="doubled">
<li>Перший пункт</li>
<li>Другий пункт</li>
<li>Третій пункт</li>
</ul>
<figcaption>border-top + border-bottom</figcaption>
</figure>
<figure>
<ul class="clean">
<li>Перший пункт</li>
<li>Другий пункт</li>
<li>Третій пункт</li>
</ul>
<figcaption>li + li { border-top }</figcaption>
</figure>CSS
figure {
display: inline-block;
margin: 0 20px 0 0;
font: 12px monospace;
text-align: center;
}
ul {
width: 180px;
margin: 0;
padding: 0;
list-style: none;
}
li {
padding: 8px 10px;
font: 14px sans-serif;
text-align: left;
}
.doubled li {
border-top: 4px solid #0172ad;
border-bottom: 4px solid #0172ad;
}
.clean li + li {
border-top: 4px solid #0172ad;
}Демонстрація роботи властивості
HTML
<p class="one">Властивість <strong>border-top</strong> - це скорочена форма запису, яка об’єднує <em>border-top-width</em>, <em>border-top-style</em> та <em>border-top-color</em> для верхньої межі елементу.
</p>
<p class="two">А ще ці властивості можна задавати окремо...</p>CSS
p {
font-family: sans-serif;
line-height: 1.45;
font-size: 20px;
padding-top: 12px;
}
.one {
border-top: 1em double #666;
}
.two {
border-top-width: 5px;
border-top-style: solid;
border-top-color: grey;
}Приклад використання властивості
HTML
<div class="block">
<code>border-top: 10px solid #666;</code>
</div>CSS
.block {
width: 500px;
height: 250px;
background-color: #eee;
border-top: 10px solid #666;
text-align: center;
font-size: 19px;
padding-top: 18%;
box-sizing: border-box;
}Демонстрація роботи властивості
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;
}Коментарі
Коментарів ще немає — будьте першим!