Css border image stretch

border — image

Надоели скучные одноцветные рамки? Используйте картинку!

Кратко

Скопировать ссылку «Кратко» Скопировано

Свойство border — image пригодится в том случае, если вы хотите задать блоку необычную рамку, а не просто сплошную или прерывистую линию одного цвета.

Это свойство позволяет использовать картинку в качестве «заливки» рамки.

Пример

Скопировать ссылку «Пример» Скопировано

   Выход
за
рамки  div class="element"> span>Выходbr>заbr>рамкиspan> div>    Скопировать Скопировано Не удалось скопировать   

 .element  border-left-style: solid; border-left-width: 65px; border-left-color: #1A5AD7; border-image: url("custom-border.svg") 66 / 66px 0 66px 66px / 0px 0 stretch;> .element  border-left-style: solid; border-left-width: 65px; border-left-color: #1A5AD7; border-image: url("custom-border.svg") 66 / 66px 0 66px 66px / 0px 0 stretch; >    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку «Как пишется» Скопировано

В примере выше специально сделана разорванная рамка. Становится хорошо видно, как браузер поступает с изначальной картинкой рамки. Он делит её на девять частей:

После этого он вставляет углы на свои места, а вот поведением вертикальных и горизонтальных сторон мы можем управлять при помощи ключевых слов.

После двоеточия значения указываются в следующем порядке:

 .selector  border-image: источник фрагмент ИЛИ процент [/ ширина ] повторение;> .selector  border-image: источник фрагмент ИЛИ процент1,4> [/ ширина 1,4>] повторение0,2>; >    Скопировать Скопировано Не удалось скопировать   

Числа в фигурных скобках ( , ) подсказывают, сколько раз может повторяться это значение.

Квадратные скобки указывают, что значение не является обязательным.

Источник

Скопировать ссылку «Источник» Скопировано

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

 .selector  border-image: url(border.png);> .selector  border-image: url(border.png); >    Скопировать Скопировано Не удалось скопировать   

Картинка может быть в любом формате. В том числе в SVG.

Можно использовать отдельное свойство border — image — source .

Фрагмент

Скопировать ссылку «Фрагмент» Скопировано

Размер одного фрагмента в пикселях. Важный момент: единицы измерения не пишутся, указывается только число. Например, если нужны фрагменты по 10 пикселей, то пишем:

 .selector  border-image: url(border.png) 10;> .selector  border-image: url(border.png) 10; >    Скопировать Скопировано Не удалось скопировать   

Значение может быть указано в процентах:

 .selector  border-image: url(border.png) 50%;> .selector  border-image: url(border.png) 50%; >    Скопировать Скопировано Не удалось скопировать   

Значение по умолчанию — 100 % .

Можно указать от одного до четырёх числовых или процентных значений. Значения разделяются пробелами.

Можно использовать отдельное свойство border — image — slice .

Ширина

Скопировать ссылку «Ширина» Скопировано

Необязательное значение. Но обратите внимание на два момента:

1. Для отображения рамки её ширина должна быть указана либо в свойстве border , либо в свойстве border — image . Если ширина рамки нигде не указана, то рамка не отображается.
2. Если указываете ширину в свойстве border — image , то её значение отделяется от предыдущих слэшем / .

 .selector  border-image: url(border.png) 50% / 10px;> .selector  border-image: url(border.png) 50% / 10px; >    Скопировать Скопировано Не удалось скопировать   

При указании ширины нужно указать единицы измерения.

Можно задать от одного до четырёх значений. Значения разделяются пробелами.

Можно использовать отдельное свойство border — image — width .

Повторение

Скопировать ссылку «Повторение» Скопировано

Описывает при помощи ключевых слов, как именно браузер должен поступить с фрагментами при создании рамки.

Ключевые слова, которые можно задать:

• stretch — значение по умолчанию. Фрагмент рамки растягивается так, чтобы заполнить промежуток между углами.
• repeat — фрагменты повторяются до тех пор, пока области между углами не будут заполнены. Фрагмент может быть обрезан.
• round — браузер повторяет фрагменты для заполнения пространства между углами, но не обрезает их. При этом, если целое число фрагментов не закрывает всю площадь, то они равномерно распределяются, так что возможно появление промежутков между фрагментами.
• space — фрагменты повторяются, а свободное место, оставшееся после повторения целого количества фрагментов, распределяется равномерно.

Можно указать до двух значений: для горизонтали и для вертикали. Если указать одно значение, то оно применится ко всем сторонам рамки.

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

 .selector  border-image: url(border.png) 50% / 10px round stretch;> .selector  border-image: url(border.png) 50% / 10px round stretch; >    Скопировать Скопировано Не удалось скопировать   

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

Центральная часть по умолчанию пустая. Чтобы заполнить её фрагментами, можно задать ключевое слово fill после значения размера фрагмента. Но для этого трюка нужно, чтобы картинка рамки включала в себя центральную часть 🔮

Фрагментами будет заполнена и центральная часть:

 .selector  border-image: url(border-fill.png) 50% fill / 10px round stretch;> .selector  border-image: url(border-fill.png) 50% fill / 10px round stretch; >    Скопировать Скопировано Не удалось скопировать   

Можно использовать отдельное свойство border — image — repeat .

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Обязательно задаётся ширина рамки. Либо в этом свойстве, либо при помощи шортката border , либо при помощи отдельного свойства border — width .

💡 Рамка — стильная штука. Без значения для свойства стиля рамка не покажется. Соответственно, нужно либо указать значение в шорткате border , либо при помощи отдельного свойства border — style .

💡 Можно сбросить картинку рамки при помощи ключевого слова none в качестве значения.

💡 Помимо картинки, в качестве рамки можно задать градиент.

Для этого вместо url ( ) пишется linear — gradient ( ) либо radial — gradient ( ) . Остальные значения указываются так же, как если бы была указана картинка.

• Chrome 56, Поддерживается 56
• Edge 12, Поддерживается 12
• Firefox 50, Поддерживается 50
• Safari 9.1, Поддерживается 9.1

На практике

Скопировать ссылку «На практике» Скопировано

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

🛠 Это свойство редко встречается в повседневной работе, но знать о нём стоит хотя бы из уважения к истории развития веба.

Раньше не существовало свойства border — radius , и для того, чтобы создать элемент с закруглёнными краями, приходилось нарезать картинки и задавать рамку именно при помощи изображения. А закруглённые края, как на зло, были тогда в большой моде 🤯

Короче, нам повезло, сейчас попроще.

Источник

border-image

Baseline is determined by this web feature being supported on the current and the previous major versions of major browsers.

The border-image CSS property draws an image around a given element. It replaces the element’s regular border.

Try it

Note: You should specify a separate border-style in case the border image fails to load. Although the specification doesn’t strictly require it, some browsers don’t render the border image if border-style is none or border-width is 0 .

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* source | slice */ border-image: linear-gradient(red, blue) 27; /* source | slice | repeat */ border-image: url("/images/border.png") 27 space; /* source | slice | width */ border-image: linear-gradient(red, blue) 27 / 35px; /* source | slice | width | outset | repeat */ border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space; /* Global values */ border-image: inherit; border-image: initial; border-image: revert; border-image: revert-layer; border-image: unset; 

The border-image property may be specified with anywhere from one to five of the values listed below.

Note: If the computed value of border-image-source is none , or if the image cannot be displayed, the border-style will be displayed instead.

Values

The dimensions for slicing the source image into regions. Up to four values may be specified. See border-image-slice .

The width of the border image. Up to four values may be specified. See border-image-width .

The distance of the border image from the element’s outside edge. Up to four values may be specified. See border-image-outset .

Defines how the edge regions of the source image are adjusted to fit the dimensions of the border image. Up to two values may be specified. See border-image-repeat .

Accessibility concerns

Assistive technology cannot parse border images. If the image contains information critical to understanding the page’s overall purpose, it is better to describe it semantically in the document.

Formal definition

• border-image-source : none
• border-image-slice : 100%
• border-image-width : 1
• border-image-outset : 0
• border-image-repeat : stretch

• border-image-slice : refer to the size of the border image
• border-image-width : refer to the width or height of the border image area

• border-image-outset : as specified, but with relative lengths converted into absolute lengths
• border-image-repeat : as specified
• border-image-slice : one to four percentage(s) (as specified) or absolute length(s), plus the keyword fill if specified
• border-image-source : none or the image with its URI made absolute
• border-image-width : as specified, but with relative lengths converted into absolute lengths

• border-image-outset : by computed value type
• border-image-repeat : discrete
• border-image-slice : by computed value type
• border-image-source : discrete
• border-image-width : by computed value type

Formal syntax

Examples

Bitmap

In this example, we will apply a diamond pattern to an element’s borders. The source for the border image is a «.png» file of 81 by 81 pixels, with three diamonds going vertically and horizontally:

HTML

div id="bitmap"> This element is surrounded by a bitmap-based border image! div> 

CSS

To match the size of a single diamond, we will use a value of 81 divided by 3, or 27 , for slicing the image into corner and edge regions. To center the border image on the edge of the element’s background, we will make the outset values equal to half of the width values. Finally, a repeat value of round will make the border slices fit evenly, i.e., without clipping or gaps.

#bitmap  width: 200px; background-color: #ffa; border: 36px solid orange; margin: 30px; padding: 10px; border-image: url("border.png") /* source */ 27 / /* slice */ 36px 28px 18px 8px / /* width */ 18px 14px 9px 4px /* outset */ round; /* repeat */ > 

Result

Gradient

HTML

div id="gradient"> This element is surrounded by a gradient-based border image! div> 

CSS

#gradient  width: 200px; border: 30px solid; border-image: repeating-linear-gradient(45deg, #f33, #3bf, #f33 30px) 60; padding: 20px; > 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Apr 28, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник