border-image-width в CSS — товщина рамки із зображення

Властивість border-image-width визначає ширину зображення заданого для межі елементу, встановлюючи внутрішні відступи від країв меж. Якщо значення border-image-width більше, ніж значення border-width, тоді зображення виходить за краї полів або вмісту елементу.

Властивість border-image-width

border-image-width використовується разом з такими властивостями як border-image-source, border-image-repeat, border-image-outset та border-image-slice для стилізування меж елементів.

Значення без задання - 1, тому, якщо значення не встановлено, але для елемента є визначення кордону або ширини кордону, зображення буде намальовано з такою шириною.

автор: Svitlana

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

автор: NagarD

Порада

Щоб зекономити час, рекомендується використовувати border-image для встановлення всіх властивостей для зображення межі одним правилом.

автор: Svitlana
Порада

Зверніть увагу, border-image використовується замість border-style, який буде показаний тільки у випадку, якщо сталася помилка при завантаженні зображення, або для border-image встановлене значення none.

автор: Svitlana
Нотатка

Чотири значения border-image-width вказують на зміщення, які використовуються для розділення зображення границі на девять частин. Вони представляють внутрішні відстані від верхньої, правої, нижньої та лівої сторони області зображення. Якщо четверте значення пропущено, воно встановлюється рівним другому. Якщо третя значення також пропущено, воно встановлюється рівним першому. Якщо и друге значение не вказано, тоді воно береться рівним первошу. Негативні значення не припустимі для будь-яких значень border-image-width.

автор: Svitlana

Синтаксис

border-image-width: number|%|length|auto|initial|inherit;

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

number

Ширина кордону в пікселях.

автор: Svitlana

%

Ширина у відсотках по відношенню до висоти та ширині зображення для кордону.

автор: Svitlana

length

Ширина у пікселях.

автор: Svitlana

auto

Ширина відповідно ширині нарізаних зображень.

автор: Svitlana

initial

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

автор: Svitlana

inherit

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

автор: Svitlana

Значення без задання: 1
Наслідує: Ні
Анімується: Ні
JavaScript синтаксис: object.style.borderImageWidth="20px"

Переглядачі

Переглядач Google Chrome Mozilla Firefox Apple Safari Opera Microsoft EDGE Microsoft Internet Explorer
16 13 6 15 12 11
Переглядач Mobile Google Android Mobile Google Chrome Mobile Mozilla Firefox Mobile Apple Safari
4.4 18 14 6

Приклади

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

Ширина намальованої рамки-зображення не зобов'язана збігатися з шириною бордера: у другому блоці вона вдвічі більша й насувається на вміст.

HTML

<div class="box">border-image-width: 12px</div>
<div class="box wide">border-image-width: 24px</div>

CSS

.box {
    margin-bottom: 12px;
    padding: 16px;
    border: 12px solid transparent;
    border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg fill='%230172ad'%3E%3Cpath d='M15 0l15 15-15 15L0 15z'/%3E%3Cpath d='M45 0l15 15-15 15-15-15z'/%3E%3Cpath d='M75 0l15 15-15 15-15-15z'/%3E%3Cpath d='M15 30l15 15-15 15L0 45z'/%3E%3Cpath d='M75 30l15 15-15 15-15-15z'/%3E%3Cpath d='M15 60l15 15-15 15L0 75z'/%3E%3Cpath d='M45 60l15 15-15 15-15-15z'/%3E%3Cpath d='M75 60l15 15-15 15-15-15z'/%3E%3C/g%3E%3C/svg%3E");
    border-image-slice: 30;
    border-image-repeat: round;
    border-image-width: 12px;
}

.wide {
    border-image-width: 24px;
}
автор: Svitlana

Вісім однакових коробок із тією самою картинкою межі й тією самою межею завтовшки 10px. Міняється лише border-image-width: типова одиниця, множники, довжина, відсоток, auto, нуль (межа зникає зовсім — видно тло) і випадок із нульовою товщиною межі, де картинка все одно малюється. Пунктирна рамка навколо кожної коробки показує, що розміри в усіх однакові.

HTML

<div class="row">
    <figure><div class="b w1"></div><figcaption>1 — типове (10px)</figcaption></figure>
    <figure><div class="b w2"></div><figcaption>2 — удвічі за межу</figcaption></figure>
    <figure><div class="b w3"></div><figcaption>3 — утричі, лізе на поле</figcaption></figure>
    <figure><div class="b wpx"></div><figcaption>30px — довжина</figcaption></figure>
    <figure><div class="b wpc"></div><figcaption>50% — від ділянки межі</figcaption></figure>
    <figure><div class="b wauto"></div><figcaption>auto — розмір шматка</figcaption></figure>
    <figure><div class="b w0"></div><figcaption>0 — межі немає зовсім</figcaption></figure>
    <figure><div class="b nobw"></div><figcaption>border-width: 0 — картинка є</figcaption></figure>
</div>

<p class="cap">Пастка скорочення: у правій коробці після картинки написано
    <span class="mono">border: 10px solid #8a94a6</span> — і картинка зникла:</p>
<div class="row">
    <figure><div class="b w2"></div><figcaption>картинка на місці</figcaption></figure>
    <figure><div class="b w2 killed"></div><figcaption>скорочення все скинуло</figcaption></figure>
</div>

CSS

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

figure {
    margin: 0;
}

figcaption {
    margin-top: 6px;
    max-width: 140px;
    font: .8em/1.35 system-ui, sans-serif;
    color: #5a6472;
}

.b {
    width: 120px;
    height: 60px;
    background: #eef1f5;
    outline: 1px dashed #b9c6d8;
    border-width: 10px;
    border-style: solid;
    border-color: #8a94a6;
    border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Crect width='90' height='90' fill='%23f2b134'/%3E%3Crect x='30' y='30' width='30' height='30' fill='%232f6fd0'/%3E%3C/svg%3E");
    border-image-slice: 30;
    border-image-repeat: stretch;
}

.w1 { border-image-width: 1; }
.w2 { border-image-width: 2; }
.w3 { border-image-width: 3; }
.wpx { border-image-width: 30px; }
.wpc { border-image-width: 50%; }
.wauto { border-image-width: auto; }
.w0 { border-image-width: 0; }

.nobw {
    border-width: 0;
    border-image-width: 20px;
}

.killed {
    border: 10px solid #8a94a6;
}

.cap {
    margin: 22px 0 8px;
    max-width: 480px;
    font: 600 .9em/1.5 system-ui, sans-serif;
    color: #5a6472;
}

.mono {
    font-family: ui-monospace, monospace;
}
автор: NagarD

HTML

<div class="box">

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

<p>Вона встановлює, ширину зображення кордону елемента. В цьому прикладі, Ви можете визначити ширину, для кожної зі сторін окремо (в такому порядку: верхня сторона, права, нижня, ліва).</p>

<strong>border-image-width: </strong>
<input type="number" class="input" id="num1" value="24">px 
<input type="number" class="input" id="num2" value="24">px 
<input type="number" class="input" id="num3" value="24">px 
<input type="number" class="input" id="num4" value="24">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: 24px solid #444;
	border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 3 3'%3E%3Crect width='3' height='3' fill='%232a9d8f'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23e9c46a'/%3E%3Crect width='1' height='1' fill='%23e63946'/%3E%3Crect x='2' width='1' height='1' fill='%23e63946'/%3E%3Crect y='2' width='1' height='1' fill='%23e63946'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23e63946'/%3E%3C/svg%3E") 24 round round;
  border-image-width: 24px 24px 24px 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 num1 = document.querySelector('#num1').value;
  var num2 = document.querySelector('#num2').value;
  var num3 = document.querySelector('#num3').value;
  var num4 = document.querySelector('#num4').value;
  document.querySelectorAll('.box').forEach((n) => n.style.setProperty('border-image-width', num1 + 'px ' + num2 + 'px ' + num3 + 'px ' + num4 + 'px'));
}));
автор: Svitlana

HTML

<div class="info">
	<p>За допомогою властивості <code>border-image-width</code> ми можемо визначити ширину зображення заданого для межі елементу.</p>
	<p>Для першого блоку застосована ширина <em>16px</em>, для другого - <em>32px</em>, третього - <em>16px 12px 6px 0</em>.</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: 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;
	padding: 16px;
	border: 16px solid #444;
	border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 3 3'%3E%3Crect width='3' height='3' fill='%232a9d8f'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23e9c46a'/%3E%3Crect width='1' height='1' fill='%23e63946'/%3E%3Crect x='2' width='1' height='1' fill='%23e63946'/%3E%3Crect y='2' width='1' height='1' fill='%23e63946'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23e63946'/%3E%3C/svg%3E") 16 round round;
}

.block.one {
	border-image-width: 32px;
}

.block.two {
	border-image-width: 16px 12px 6px 0;
}
автор: Svitlana

HTML

<div class="block">
  <p>Ось такий гарний візерунок <br> замість нудної лінії...</p>
</div>

CSS

.block {
  width: 500px;
  height: 350px;
  
  font-family: sans-serif;
  font-size: 18px;
  text-align: center;
  padding-top: 12%;
  box-sizing: border-box;
  
  border: 16px solid #666;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 3 3'%3E%3Crect width='3' height='3' fill='%232a9d8f'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23e9c46a'/%3E%3Crect width='1' height='1' fill='%23e63946'/%3E%3Crect x='2' width='1' height='1' fill='%23e63946'/%3E%3Crect y='2' width='1' height='1' fill='%23e63946'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23e63946'/%3E%3C/svg%3E");
  border-image-slice: 16; 
  border-image-repeat: round; 
  border-image-width: 20px 5px;
}
автор: Svitlana

HTML

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

CSS

.block {
	background-color: #eee;
	width: 300px;
	height: 250px;
	border: 8px solid #666;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 3 3'%3E%3Crect width='3' height='3' fill='%232a9d8f'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23e9c46a'/%3E%3Crect width='1' height='1' fill='%23e63946'/%3E%3Crect x='2' width='1' height='1' fill='%23e63946'/%3E%3Crect y='2' width='1' height='1' fill='%23e63946'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23e63946'/%3E%3C/svg%3E"); 
  border-image-slice: 16; 
  border-image-width: 16px 8px; 
  border-image-repeat: round; 
}
автор: Svitlana

Коментарі

Коментарів ще немає — будьте першим!

Відповідь для

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~		 Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень		 Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле веде сходинками (розділ → тип → сторінка), а хибний ключ підкреслить хвилею.
[[!sandbox/S0oh1hBm]] Живий приклад окремим рядком — саме вікно результату. Той самий ключ зі знаком !: наберіть [[! і дійдіть сходинками до потрібної сторінки, список покаже її приклади.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```		 Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження		 Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox		 Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає		 Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.		 Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||		 Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Увійдіть — коментар з'явиться одразу, без капчі й очікування перевірки.

Правка
Зворотний зв'язок
Вхід