CSS border-image-source — зображення для рамки

Властивість border-image-source використовується для визначення розташування зображення, яке буде використано для стилізування межі елементу.

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

Це може бути URL-адреса, URI-дані, градієнт CSS або вбудований SVG. border-image-source використовується разом з такими властивостями як border-image-slice, border-image-repeat, border-image-outset та border-image-width для стилізування меж елементів.

автор: Svitlana

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

автор: NagarD

Порада

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

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

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

автор: Svitlana

Синтаксис

border-image-source: none|image|initial|inherit;

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

image

Шлях до зображення

автор: Svitlana

none

Не використовувати зображення.

автор: Svitlana

initial

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

автор: Svitlana

inherit

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

автор: Svitlana

Значення без задання: none
Наслідує: Ні
Анімується: Ні
JavaScript синтаксис: object.style.borderImageSource="url(border.png)"

Переглядачі

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

Приклади

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

border-image-source вказує саме зображення для рамки; як його різати й повторювати — справа border-image-slice та border-image-repeat.

HTML

<div class="box">Джерело рамки — svg із ромбами.</div>

CSS

.box {
    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;
}
автор: Svitlana

Один і той самий градієнт як border-image-source у трьох станах: без border-style не видно нічого; з solid, але без нарізки, градієнт стискається в кути; border-image-slice: 1 дає нормальну градієнтну рамку.

HTML

<div class="box a">border-style немає — рамки не видно</div>
<div class="box b">solid, але без border-image-slice</div>
<div class="box c">solid + border-image-slice: 1</div>

CSS

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

.box {
  width: 240px;
  margin-bottom: 16px;
  padding: 10px;
  background-color: #f4f6f8;
  border-width: 10px;
  border-color: transparent;
  border-image-source: linear-gradient(90deg, #e9573f, #f6bb42, #37bc9b);
}

.b {
  border-style: solid;
}

.c {
  border-style: solid;
  border-image-slice: 1;
}
автор: NagarD

HTML

<div class="box">

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

<p>Вона встановлює шлях до зображення кордону.</p>

<strong>border-image-source: </strong>
<input type="text" class="input" id="source" value="data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2796%27%20height=%2796%27%3E%3Crect%20width=%2796%27%20height=%2796%27%20fill=%27%23e9c46a%27/%3E%3Crect%20x=%2732%27%20y=%2732%27%20width=%2732%27%20height=%2732%27%20fill=%27%232a9d8f%27/%3E%3Crect%20width=%2732%27%20height=%2732%27%20fill=%27%23e76f51%27/%3E%3Crect%20x=%2764%27%20width=%2732%27%20height=%2732%27%20fill=%27%23e76f51%27/%3E%3Crect%20y=%2764%27%20width=%2732%27%20height=%2732%27%20fill=%27%23e76f51%27/%3E%3Crect%20x=%2764%27%20y=%2764%27%20width=%2732%27%20height=%2732%27%20fill=%27%23e76f51%27/%3E%3C/svg%3E">
<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: 32px solid #444;
  border-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2796%27%20height=%2796%27%3E%3Crect%20width=%2796%27%20height=%2796%27%20fill=%27%23e9c46a%27/%3E%3Crect%20x=%2732%27%20y=%2732%27%20width=%2732%27%20height=%2732%27%20fill=%27%232a9d8f%27/%3E%3Crect%20width=%2732%27%20height=%2732%27%20fill=%27%23e76f51%27/%3E%3Crect%20x=%2764%27%20width=%2732%27%20height=%2732%27%20fill=%27%23e76f51%27/%3E%3Crect%20y=%2764%27%20width=%2732%27%20height=%2732%27%20fill=%27%23e76f51%27/%3E%3Crect%20x=%2764%27%20y=%2764%27%20width=%2732%27%20height=%2732%27%20fill=%27%23e76f51%27/%3E%3C/svg%3E") 32 round round;
}

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

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

JS

document.querySelectorAll('.input').forEach((el) => el.addEventListener('change', function () {
  var source = document.querySelector('#source').value;
  document.querySelectorAll('.box').forEach((n) => n.style.setProperty('border-image-source', 'url(' + source + ')'));
}));
автор: Svitlana

HTML

<div class="info">
	<p>За допомогою властивості <code>border-image-source</code> ми можемо встановити шлях до зображення, яке буде використане в якості кордону для елементу зображення. Для другого блоку границя задана у вигляді картинки.</p>
</div>

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

CSS

* {
	box-sizing: border-box;
}

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

.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'%3E%3Crect width='48' height='48' fill='%23e9c46a'/%3E%3Crect x='16' y='16' width='16' height='16' fill='%232a9d8f'/%3E%3Crect width='16' height='16' fill='%23e76f51'/%3E%3Crect x='32' width='16' height='16' fill='%23e76f51'/%3E%3Crect y='32' width='16' height='16' fill='%23e76f51'/%3E%3Crect x='32' y='32' width='16' height='16' fill='%23e76f51'/%3E%3C/svg%3E") 16 round round;
}

.block.one {
	border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Crect width='48' height='48' fill='%2390e0ef'/%3E%3Crect x='16' y='16' width='16' height='16' fill='%23e9c46a'/%3E%3Crect width='16' height='16' fill='%233a86ff'/%3E%3Crect x='32' width='16' height='16' fill='%233a86ff'/%3E%3Crect y='32' width='16' height='16' fill='%233a86ff'/%3E%3Crect x='32' y='32' width='16' height='16' fill='%233a86ff'/%3E%3C/svg%3E");
}
автор: 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: 28px solid #666;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='510' height='510'%3E%3Crect width='510' height='510' fill='%23e9c46a'/%3E%3Crect x='170' y='170' width='170' height='170' fill='%232a9d8f'/%3E%3Crect width='170' height='170' fill='%23e76f51'/%3E%3Crect x='340' width='170' height='170' fill='%23e76f51'/%3E%3Crect y='340' width='170' height='170' fill='%23e76f51'/%3E%3Crect x='340' y='340' width='170' height='170' fill='%23e76f51'/%3E%3C/svg%3E");
  border-image-slice: 170; 
  border-image-repeat: stretch; 
}
автор: Svitlana

HTML

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

CSS

.block {
	background-color: #eee;
	width: 300px;
	height: 250px;
	border: 16px solid #666;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Crect width='48' height='48' fill='%23e9c46a'/%3E%3Crect x='16' y='16' width='16' height='16' fill='%232a9d8f'/%3E%3Crect width='16' height='16' fill='%23e76f51'/%3E%3Crect x='32' width='16' height='16' fill='%23e76f51'/%3E%3Crect y='32' width='16' height='16' fill='%23e76f51'/%3E%3Crect x='32' y='32' width='16' height='16' fill='%23e76f51'/%3E%3C/svg%3E"); 
  border-image-slice: 16; 
}
автор: 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`.
||		 Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

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

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