Border-image-source - CSS Property
Summary of characteristics of the border-image-source property
nonenoneDiscrète: during an animation, the border-image-source property passes from one value to another without transition. (1)Single: single value (no order).(1) See, however, the special case of certain browsers.
Syntax diagram of border-image-source.
border-image-source property.The links in the diagram provide more details about the values.
Download the diagram in SVG.
In the diagram, the bold terms are the predefined words of CSS, the other terms are described below:
imageis an image, specified by one of the functions recognized by CSS:url()orsrc(),image(),image-set(),cross-fade(),stripes(),element()gradientis a color gradient, defined by one of the known CSS functions:conic-gradient(),linear-gradient(),radial-gradient(),repeating-conic-gradient(),repeating-linear-gradient(),repeating-radial-gradient()
Description of the border-image-source property.
border-image-source sets the image that will be used to build the border.
Other properties related to image borders.
Values for border-image-source.
- border-image-source: none;
Default value. No image will be used for the border.
- border-image-source: url(...); border-image-source: image(...); border-image-source: image-set(...);
The specified image will be used for building the border. Many syntaxes allow you to specify the image: refer to the functions
url(),image(),
image-set(). - border-image-source: linear-gradient(...); border-image-source: radial-gradient(...); border-image-source: conic-gradient(...); border-image-source: repeating-linear-gradient(...); border-image-source: repeating-radial-gradient(...); border-image-source: repeating-conic-gradient(...);
The border will be built from a gradient. Check out the gradient functions for more details on the syntax:
conic-gradient(),linear-gradient(),radial-gradient(), and for repeating gradients:repeating-conic-gradient(),repeating-linear-gradient(),repeating-radial-gradient() - border-image-source: initial; (
none) border-image-source: inherit; border-image-source: revert; border-image-source: revert-layer; border-image-source: revert-rule; border-image-source: unset;See the following pages for more details:
initial,inherit,revert,revert-layer,revert-rule,unset.
Animation of the border-image-source property.
The border-image-source property can be animated. The standard specifies a switch from one image to another without any transition,
but some browsers add a fade effect between images. This is the case with Google Chrome or Microsoft Edge, for example.
Access the border-image-source property via a program
With Javascript, change the value of border-image-source.
In JavaScript, here's how to change the value of border-image-source. You can see that JavaScript offers a syntax with the typical CSS-style notation,
in kebab-case (a dash to separate words), and another syntax with camel-case notation (a capital letter to separate words).
let el = document.getElementById('id');
el.style['border-image-source'] = "url('image.png')";
// or
let el = document.getElementById('id');
el.style.borderImageSource = "url('image.png')";
With Javascript, read the value of border-image-source.
The property must have been applied directly to the element itself via its style attribute, not through a CSS selector.
let el = document.getElementById('id');
let value = el.style['border-image-source'];
// or
let el = document.getElementById('id');
let value = el.style.borderImageSource;
With Javascript, read the computed value of border-image-source.
The computed value is the one that results from converting relative paths into absolute paths, and from taking into account any inherited values.
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('border-image-source');
With JQuery, read or change the value of border-image-source.
JQuery is a JavaScript library that often allows shorter syntax than JavaScript itself.
// Read the value:
$('#id').prop('border-image-source');
// Write the value:
$('#id').prop('border-image-source', "url('image.png')");
$('#id').prop('{border-image-source': "url('image.png')"});
With JQuery, read the computed value of border-image-source.
let value = $('#id').css('border-image-source');
Other code examples.
Other examples of Javascript and JQuery code are given on the page Javascript and CSS. They all deal with manipulating CSS styles.
Test it yourself.
The buttons below apply the entered value to the border-image-source property and then display either the value as it was applied, or the computed value.
This second option lets you see how the value of border-image-source is stored (serialized). In particular, you’ll notice that paths are converted to
absolute ones.
Simulator.
Browsers compatibility with border-image-source.
The border-image-source property and other properties related to border images have been supported from 2015 to 2017 depending on the browsers.
border-image property.border-image-source which defines the image to be used for the border.Notes:
(1) Supports the summary property but not detailed properties.
for borders
border-image-sourceproperty
Browsers on computers :
Mobile browsers :
Outdated or marginal browsers :
Internet Explorer
KaiOS Browser
Opéra Mobile
Chrome
Edge
Opéra
Safari
Safari sur IOS
Androïd Brower
Chrome pour Androïd
Firefox pour Androïd
Samsung Internet
Firefox
Baidu Browser
QQ Browser
UC Browser pour Androïd
Opéra mini
Historic of the border-image-source property.
-
CSS Backgrounds and Borders Module Level 3
Level 3 of the specification also explains how to position the background relative to the background area, and how to crop it.
Regarding borders, the concept of image borders is introduced, as well as the ideas of rounded corners and box shadows.Regardingborder-image-sourceIntroduction of borders made with an image, instead of simple paths, and corresponding properties, includingborder-image-width.
August 02, 2002Working Draft.
December 17, 2009Candidate Recommendation.
Other features of borders and backgrounds.
The properties related to borders, and more specifically to border images, are described in the W3C specification called CSS Backgrounds and Borders Module.
Properties: