CSS border-width — товщина рамки з усіх боків

Властивість border-width встановлює товщину для всіх меж елементу.

Вона використовується для скороченого запису border-top-width, border-right-width, border-bottom-width та border-left-width.

Ви можете використати від одного до чотирьох значень. Кожне значення визначає стиль для кожної зі сторін елементу.

Наприклад, якщо задано всі чотири значення вони задаватимуть стилі для верхньої, правої, нижньої та лівої сторін(саме в такому порядку). Три значення задають стилі для верхньої, лівої та правої, нижньої сторін(саме в такому порядку).

правити

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

правити

Порада

Завжди оголошуйте властивість кордону стилю до властивості border-width. Елемент повинен мати кордони, перш ніж Ви зможете змінити їх товщину.

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

Нотатка

Важливо, що значення без задання дорівнює medium, початкове значення для стилю - none, тому без border-style межа в будь-якому випадку матиме товщину 0.

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

Нотатка

Специфікація не визначає чітко товщину кожного з ключових слів (thin, medium, thick). Проте вимагає, щоб вони розташовувалися один за одним: thin ≤ medium ≤ thick, та мали постійне значення в межах одного документу.

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

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

Синтаксис

border-width: medium|thin|thick|length|initial|inherit;

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

medium

Лінія середньої товщини (3 пікселі). Без задання.

автор: Svitlana

правити

thin

Тонка лінія. Значення в пікселях може змінюватися в залежності від браузера, але зазвичай становить 1 піксель

автор: Svitlana

правити

thick

Товста лінія (6 пікселів)

автор: Svitlana

правити

length

Для точного встановлення товщини можна використовувати будь-які одиниці виміру прийняті в CSS.

автор: Svitlana

правити

initial

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

автор: Svitlana

правити

inherit

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

автор: Svitlana

правити

Переглядачі

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

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

Переглядач
	1	1	1	3.5	12	4

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

Переглядач
	2	18	4	3

Приклади

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

<div class="info">
	<p>За допомогою властивості <code>border-width</code> ми можемо встановити ширину для кордону елемента.</p>
	<p>Кордон першого блоку має ширину <em>16px</em>, два інші мають: <em>3em</em> i <em>2px</em> відовідно.</p>
</div>

<div class="wrapper">
	<div class="block"></div>
	<div class="block em"></div>
	<div class="block px"></div>
</div>

* {
	box-sizing: border-box;
}

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

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

em {
	font-weight: 700;
}

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 #666;
}

.block.em {
	border-width: 3em;
}

.block.px {
	border-width: 2px;
}

<p>Усі чотири межі — по 15 пікселів.</p>

p {
    border-style: solid;
    border-width: 15px;
    padding: 8px;
}

<div class="block">
	<code>border-width: 12px;</code>
</div>

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

	border: 12px solid #666;

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

<div class="block block-1">
  <code>none</code>
</div>
<div class="block block-2">
  <code>hidden</code>
</div>
<div class="block block-3">
  <code>dotted</code>
</div>
<div class="block block-4">
  <code>dashed</code>
</div>
<div class="block block-5">
  <code>solid</code>
</div>

.block {
  width: 450px;
  height: 150px;
  background-color: #ccc;
  border-color: #666;
  border-style: solid;
  margin-bottom: 16px;
  padding-top: 45px;
  box-sizing: border-box;
  text-align: center;
  font-family: monospace;
  color: #222;
  font-size: 13px;
}

.block-1 {
  border-width: thin;
}
.block-2 {
  border-width: medium;
}
.block-3 {
  border-width: thick;
}
.block-4 {
  border-width: 10px;
}
.block-5 {
  border-width: 1.5em;
}

<div class="box">

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

<p>Вона встановлює ширину кордону елемента.</p>

<strong>border-width: </strong>
<input type="number" class="input" id="num" value="24" min="0">px
<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: 24px solid #F74C32;
}

.input {
  margin-bottom: 36px;
  width: 75px;
}

#select {
  position: relative;
  top: -4px;
  width: 100px;
}

document.querySelectorAll('.input').forEach((el) => el.addEventListener('change', function () {
  var num = document.querySelector('#num').value;
  document.querySelectorAll('.box').forEach((n) => n.style.setProperty('border-width', num + 'px'));
}));

<div class="box a">border-width: 10px<br>без border-style — нічого</div>
<div class="box b">border-width: 10px<br>+ border-style: solid</div>
<div class="box c">border-width: 4px 16px<br>верх-низ / боки</div>

body {
  font-family: sans-serif;
  font-size: 14px;
  padding: 12px;
}

.box {
  width: 200px;
  margin-bottom: 14px;
  padding: 10px;
  background-color: #f4f6f8;
  border-color: #4a6fa5;
}

.a {
  border-width: 10px;
}

.b {
  border-width: 10px;
  border-style: solid;
}

.c {
  border-width: 4px 16px;
  border-style: solid;
}