CSS border-image — зображення замість рамки

border-image - це одна з властивостей, яка була введена у CSS3 для можливості використання зображення як межі елементу.

border-image використовується для скороченого запису таких властивостей як border-image-source, border-image-slice, border-image-width, border-image-outset, і border-image-repeat. Це ефективний метод, щоб додати зображення для рамки.

Товщина рамки задається властивістю border, при цьому якщо вказано border: 0, то рамка не виводиться. При інших значеннях властивості border малюнок завжди має пріоритет.

Одночасно можна задати наступні властивості:

• border-image-source
• border-image-slice
• border-image-width
• border-image-outset
• border-image-repeat

Якщо не вказати якесь значення, то браузер встановить це значення в значення без задання.

Також підтримуються градієнти CSS будь-якого типу

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

На відміну від деяких інших властивостей, які встановлюють кордон для елементів, border-image не може бути анімованим. Вона також не може стилізувати кордон разом з використанням заокруглення, тобто властивістю border-radius.

Дозволяється використовувати одне, два, три або чотири значення, поділяючи їх між собою пробілом. Ефект залежить від кількості значень і приведений в таблиці.

правити

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

правити

Порада

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

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

Нотатка

Якщо задано тло через властивість background, то він відображається під рамкою.

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

Нотатка

Firefox до версии 15.0 поддерживает свойство -moz-border-image. Safari, Chrome до версии 15.0, Android и iOS поддерживают свойство -webkit-border-image. Opera до версии 15.0 поддерживает свойство -o-border-image.

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

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

Синтаксис

border-image: source slice width outset repeat|initial|inherit && stretch|repeat|round;

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

border-image-source

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

автор: Svitlana

правити

border-image-slice

Як нарізати зображення для кордону.

автор: Svitlana

правити

border-image-width

Ширина кордону.

автор: Svitlana

правити

border-image-outset

Визначає на яку величину може виходити зображення за межі кордону блоку.

автор: Svitlana

правити

border-image-repeat

Як буде повторюватися зображення

автор: Svitlana

правити

initial

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

автор: Svitlana

правити

inherit

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

автор: Svitlana

правити

stretch

Розтягує малюнок кордону до розмірів елемента. Це значення використовується за умовчанням.

автор: Svitlana

правити

repeat

Повторює малюнок кордону.

автор: Svitlana

правити

round

Повторює малюнок і масштабує його так, щоб на стороні елемента виявилося ціле число зображень.

автор: Svitlana

правити

Переглядачі

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

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

Переглядач
	16	15	6	11	12	11

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

Переглядач
	4.4	18	15	6

Приклади

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

<div id="borderimg">Рамка зібрана з зображення з ромбами: нарізка по 30px, повторення round.</div>

#borderimg {
    padding: 16px;
    border: 12px solid transparent;
    border-image: 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") 30 round;
}

<div class="box">

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

<p>Вона встановлює в якості кордону для елементу зображення. У цьому прикладі Ви мусите вибрати ширину кордону, його форму, а також колір.</p>

<strong>border-image: </strong>
url(<input type="text" class="input" id="url" value="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Crect width='90' height='90' fill='%23e76f51'/%3E%3Crect x='30' y='30' width='30' height='30' fill='%232a9d8f'/%3E%3C/svg%3E">)
<input type="number" class="input" id="num" value="30">
<select class="input" id="select">
  <option value="stretch" name="value2" selected>stretch</option>
  <option value="repeat" name="value2">repeat</option>
  <option value="round" name="value2">round</option>
</select> 
<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: 30px solid #F74C32;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Crect width='90' height='90' fill='%23e76f51'/%3E%3Crect x='30' y='30' width='30' height='30' fill='%232a9d8f'/%3E%3C/svg%3E") 30 stretch;
}

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

#url {
  width: 175px;
}

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

document.querySelectorAll('.input').forEach((el) => el.addEventListener('change', function () {
  var sel = document.querySelector('#select').selectedOptions[0].textContent;
  var num = document.querySelector('#num').value;
  var url = document.querySelector('#url').value;
  document.querySelectorAll('.box').forEach((n) => n.style.setProperty('border-image', 'url("' + url + '") ' + num + ' ' + sel));
}));

<div class="card ok">border-image працює</div>
<div class="card bad">border: 0 — нічого не видно</div>

.card {
    width: 260px;
    padding: 16px;
    margin-bottom: 16px;
    font: 15px sans-serif;
    background: #fff;
    border-image: linear-gradient(135deg, #d2451e, #f0a202, #4a6fa5) 1;
}
.ok  { border: 8px solid #ccc; }
.bad { border: 0; }

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

<div class="wrapper">
	<div class="block"></div>
	<div class="block img"></div>
	<div class="block grad"></div>
</div>

* {
	box-sizing: border-box;
}

body {
	font-family: monospace;
	font-size: 19px;
}

.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;
}

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

.block.grad {
	border-image: linear-gradient(#F12668, #2C281E) 16 round round;
}

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

.block {
  width: 500px;
  height: 350px;
  
  font-family: sans-serif;
  font-size: 18px;
  text-align: center;
  padding-top: 12%;
  box-sizing: border-box;
  
  border: 20px solid #666;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='195' height='195'%3E%3Crect width='195' height='195' fill='%23e76f51'/%3E%3Crect x='65' y='65' width='65' height='65' fill='%232a9d8f'/%3E%3C/svg%3E") 65 round;
}

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

.block {
    background-color: #eee;
    width: 300px;
    height: 250px;
    border: 16px solid #666;
    border-image: linear-gradient(red, yellow) 10;
  }