Свойство border-image в CSS

Изображения рамок CSS

Обычную линию вокруг элемента может заменить изображение, а настраивается это с помощью CSS-свойства border-image.

Свойство CSS border-image

Вместо обычной рамки border-image рисует рамку из изображения, которое вы указываете.

Представьте поле для игры в крестики-нолики, наложенное на это изображение: оно разрезается на девять секций. Угловые части попадают в углы элемента, а части между ними повторяются или растягиваются, как вы предпочитаете.

Как сокращённое свойство, border-image заменяет пять отдельных свойств:

border-image-source — путь к изображению
border-image-slice — места, где делаются разрезы
border-image-width — ширина, с которой рисуется результат
border-image-outset — расстояние, на которое результат выходит за пределы блока рамки
border-image-repeat — повторяется ли изображение, скругляется или растягивается

Примечание: Если для элемента не задано ещё и свойство border, border-image не действует!

Примеры CSS border-image

Рамку во всех примерах ниже создаёт одно и то же изображение — «border.png».

Изображение рамки с round

При значении round копии средней секции укладываются рядом друг с другом, пока область не заполнится, и масштабируются, если иначе не помещаются.

Создайте страницу с абзацем, у которого рамка-изображение использует CSS-свойство border-image с изображением "border.png", значением среза 30 и режимом повторения round. Установите рамку 10px solid transparent и внутренний отступ 15px.

> Результат: полная HTML-страница

Prompt

Создайте страницу с абзацем, у которого рамка-изображение использует CSS-свойство border-image с изображением "border.png", значением среза 30 и режимом повторения round. Установите рамку 10px solid transparent и внутренний отступ 15px.

Результат: полная HTML-страница

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Border Image Round</title>
<style>
#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 round;
}
</style>
</head>
<body>

<h1>CSS border-image Property</h1>

<p id="borderimg">An image as the border!</p>

</body>
</html>

Изображение рамки с stretch

При значении stretch одна копия средней секции растягивается на всю область.

Создайте страницу с абзацем, у которого рамка-изображение использует CSS-свойство border-image с изображением "border.png", значением среза 30 и режимом повторения stretch. Установите рамку 10px solid transparent и внутренний отступ 15px.

> Результат: полная HTML-страница

Prompt

Создайте страницу с абзацем, у которого рамка-изображение использует CSS-свойство border-image с изображением "border.png", значением среза 30 и режимом повторения stretch. Установите рамку 10px solid transparent и внутренний отступ 15px.

Результат: полная HTML-страница

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Border Image Stretch</title>
<style>
#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 stretch;
}
</style>
</head>
<body>

<h1>CSS border-image Property</h1>

<p id="borderimg">An image as the border!</p>

</body>
</html>

CSS border-image - Разные значения среза

Внешний вид изображения рамки резко меняется, как только изменяется значение среза.

Пример

Режим повторения round у этих трёх элементов остаётся одним и тем же, а значение среза меняется с 50 на 20% и затем на 30%.

Создайте страницу с тремя абзацами, каждый с CSS border-image, использующим "border.png" и режим повторения round, но с разными значениями среза: 50, 20% и 30%. Каждый должен иметь рамку 10px solid transparent и внутренний отступ 15px.

> Результат: полная HTML-страница

Prompt

Создайте страницу с тремя абзацами, каждый с CSS border-image, использующим "border.png" и режим повторения round, но с разными значениями среза: 50, 20% и 30%. Каждый должен иметь рамку 10px solid transparent и внутренний отступ 15px.

Результат: полная HTML-страница

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Border Image - Different Slice Values</title>
<style>
#borderimg1 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 50 round;
}

#borderimg2 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 20% round;
}

#borderimg3 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30% round;
}
</style>
</head>
<body>

<h1>CSS border-image - Different Slice Values</h1>

<p id="borderimg1">border-image: url(border.png) 50 round;</p>

<p id="borderimg2">border-image: url(border.png) 20% round;</p>

<p id="borderimg3">border-image: url(border.png) 30% round;</p>

</body>
</html>

Свойства CSS для изображения рамки

Все CSS-свойства изображения рамки для справки:

border-image — сокращение, охватывающее все свойства border-image-*
border-image-source — путь к изображению, образующему рамку
border-image-slice — способ разрезания изображения рамки
border-image-width — ширина, с которой рисуется изображение рамки
border-image-outset — насколько область изображения рамки выходит за пределы блока рамки
border-image-repeat — повторяется ли изображение рамки, скругляется или растягивается