border-image-source

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..

Learn more
See full compatibility

Описание

The border-image-source CSS property defines the <image> to use instead of the style of the border. If this property is set to none, the style defined by border-style is used instead.

Примечание: Though any <image> can be used with this CSS property, browser support is still limited and some browsers support only images defined using the url() functional notation.

Начальное значение	`none`
Применяется к	все элементы, кроме внутренних табличных элементов, когда `border-collapse`:`collapse`. Это также применяется к `::first-letter`.
Наследуется	нет
Обработка значения	`none` или изображение с абсолютным URI
Animation type	discrete

Синтаксис

css

/* no border-image, use the specified border-style */
border-image-source: none;
/* the image.jpg is used as image */
border-image-source: url(image.jpg);
/* a gradient is used as image */
border-image-source: linear-gradient(to top, red, yellow);
/* Global values */
border-image-source: inherit;
border-image-source: initial;
border-image-source: unset;

Значения

none: Specifies that no image should be used for the border. Instead the style defined by border-style is used.
<image>: Ссылка на изображение, которое будет использоваться в отрисовке границы.

Формальный синтаксис

border-image-source = 
 none | 
 <image> 

<image> = 
 <url> | 
 <image()> | 
 <image-set()> | 
 <cross-fade()> | 
 <element()> | 
 <gradient> 

<image()> = 
 image( <image-tags>? [ <image-src>? , <color> ? ]! ) 

<image-set()> = 
 image-set( <image-set-option># ) 

<cross-fade()> = 
 cross-fade( <cf-image># ) 

<element()> = 
 element( <id-selector> ) 

<image-tags> = 
 ltr | 
 rtl 

<image-src> = 
 <url> | 
 <string> 

<image-set-option> = 
 [ <image> | <string> ] [ <resolution> || type( <string> ) ] ? 

<cf-image> = 
 [ <image> | <color> ] && 
 <percentage [0,100]> ? 

<id-selector> = 
 <hash-token>

Примеры

See border-image for examples of what the various source values will do.

Спецификации

Specification
CSS Backgrounds and Borders Module Level 3 # border-image-source

Совместимость с браузерами

Help improve MDN

Learn how to contribute

This page was last modified on 7 нояб. 2025 г. by MDN contributors.

View this page on GitHub • Report a problem with this content