W3docs
ru
Войти

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

Свойство CSS border-image-source позволяет задать изображение в качестве рамки элемента. Примеры и интерактивные демонстрации.

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

На этой странице описаны значения, принимаемые border-image-source, взаимодействие со смежными свойствами border-image-*, типичные ошибки, из-за которых рамка-изображение бесследно исчезает, а также редактируемые примеры для экспериментов.

border-image-source — одно из свойств CSS3 и почти всегда задаётся совместно с border-image-slice через сокращённое свойство border-image.

Когда его использовать

Рамка-изображение нужна тогда, когда обычный border не даёт желаемого вида — декоративная рамка, лента, нарисованный от руки край или градиентный контур. Поскольку источником может быть любое изображение, в том числе CSS-градиент, можно получать эффекты, недоступные при использовании одного лишь border-color.

Как border-image-source взаимодействует с другими свойствами

border-image-source лишь называет изображение. Четыре смежных свойства управляют остальным, причём рамка-изображение не отображается до тех пор, пока не задано border-image-slice:

  • border-image-slice — нарезает источник на 9 областей (4 угла, 4 стороны, 1 центр).
  • border-image-width — толщина нарисованной рамки-изображения.
  • border-image-outset — насколько далеко изображение выступает за пределы блока рамки.
  • css-border-image-repeat-property — способ размещения боковых фрагментов: stretch, repeat или round.

Важные особенности

  • Сначала задайте border. Рамка-изображение заполняет область, определённую рамкой элемента, поэтому по-прежнему необходимо задать border-width (обычно border: 10px solid transparent;). Без ширины рамки рисовать попросту некуда.
  • Требуется border-image-slice. Если задать только источник, ничего не отобразится: браузеру нужны значения нарезки, чтобы определить положение углов.
  • none или неудавшаяся загрузка возвращают к border-style. Если изображение не может быть отображено, используются обычные стили рамки — задайте видимый border-style как запасной вариант.
Начальное значениеnone
ПрименяетсяКо всем элементам, кроме внутренних элементов таблицы при border-collapse со значением "collapse". Также применяется к ::first-letter.
НаследуетсяНет.
АнимируетсяНет.
ВерсияCSS3
Синтаксис DOMobject.style.borderImageSource = "url()";

Синтаксис

Значения CSS border-image-source

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

Пример свойства border-image-source:

Пример кода CSS border-image-source

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 15px;
        border-image-source: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg");
        border-image-slice: 15;
      }
    </style>
  </head>
  <body>
    <h2>Border-image-source property example</h2>
    <p class="border">Hello World!</p>
    <p>Here is the original image:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" alt="Border image" style="width:50%" />
  </body>
</html>
Попробуйте сами »

Результат

![Описание CSS border-image-source](/uploads/media/default/0001/04/aad8e5faee47f41e2ac519e2aa0214b5c1c9cb8f.png "CSS border-image-source example result" =420x)

Пример с CSS-градиентом в качестве источника

Источник не обязан быть файлом — подойдёт любое CSS-изображение, включая градиенты. Этот пример рисует цветную рамку без каких-либо графических файлов:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .gradient-border {
        border: 12px solid transparent;
        padding: 15px;
        border-image-source: linear-gradient(45deg, #6610f2, #20c997);
        border-image-slice: 1;
      }
    </style>
  </head>
  <body>
    <p class="gradient-border">A border drawn from a CSS gradient.</p>
  </body>
</html>

Здесь border-image-slice: 1 нарезает один пиксель, чего достаточно для плавного градиента, поскольку градиент продолжается вдоль каждой стороны.

Значения

ЗначениеОписание
noneИзображение не используется; элемент возвращается к своему border-style. Это значение по умолчанию.
imageЛюбое CSS <image>: url() на файл или градиент, например linear-gradient(...) / radial-gradient(...).
initialУстанавливает свойство в значение по умолчанию (none).
inheritНаследует значение от родительского элемента.

Связанные свойства

Практика

Практика
Каково правильное использование свойства border-image-source в CSS?
Каково правильное использование свойства border-image-source в CSS?
Was this page helpful?