The border-image-source property in CSS

The border-image-source property in CSS is identified for setting the source image which is used to create the border image of an element. The border-image-slice property is used for dividing the source image into regions, which are afterwards applied dynamically to the final border image.

The syntax for the border-image-source property in CSS-

<image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>? [ <image-src>? , <color>? ]! )<image-set()> = image-set( <image-set-option># )<element()> = element( <id-selector> )<paint()> = paint( <ident>, <declaration-value>? )<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<side-or-corner> = [ left | right ] || [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop><ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-length>?<linear-color-hint> = <length-percentage><length-percentage> = <length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage>

The syntax for the border-image-source property for the keyword values-

border-image-source: none;

The syntax for the border-image-source property for the global values-

border-image-source: initial;
border-image-source: inherit;
border-image-source: unset;

Values for the border-image-source property in CSS-

CSS border-image-source property Example-

Here in the example below, we are using the border-image-source property with different border images, colors and their different values. In this case, we have given the border-image-source value using the 'linear gradient' value. The CSS styling is done inside the opening and closing head tags of the HTML. You have the choice to give any title to your program and you can also indent your text and object according to your selection of colours or styles or variants, etc. The CSS is embedded inside the html code with the code- <style type="text/CSS> using the starting and closing <style> tags. And within the 'body' tag, you are required to give the text, paragraphs, etc.

<!DOCTYPE html>
<html>

<head>
	<title>Border-image-source property in CSS</title>
	<style type="text/css">
		.wrapper {
		  width: 400px;
		  height: 300px;
		}
		
		div > div {
		  width: 300px;
		  height: 200px;
		  border-width: 60px;
		  border-style: solid;
		  border-image-source: repeating-linear-gradient(60deg, red, black 200px);
		}
	</style>
</head>

<body>
	<div class="wrapper">
		<div></div>
	</div>
</body>

</html>

Output-

CSS border-image-source property example using the 'none' value-

Here in the example below, we are using the border-image-source property with different border images, colors and their different values. In this case, we have given the border-image-source value as 'none' value. The CSS styling is done inside the opening and closing head tags of the HTML. You have the choice to give any title to your program and you can also indent your text and object according to your selection of colours or styles or variants, etc. The CSS is embedded inside the html code with the code- <style type="text/CSS> using the starting and closing <style> tags. And within the 'body' tag, you are required to give the text, paragraphs, etc.

<!DOCTYPE html>
<html>

<head>
	<title>Border-image-source property in CSS</title>
	<style type="text/css">
		.wrapper {
		  width: 400px;
		  height: 300px;
		}
		
		div > div {
		  width: 300px;
		  height: 200px;
		  border-width: 60px;
		  border-style: solid;
		  border-image: url('/media/examples/border-stars.png');
		  border-image-source: none;
		}
	</style>
</head>

<body>
	<div class="wrapper">
		<div></div>
	</div>
</body>

</html>

Output-

Browser Compatibility

The term 'browser compatibility' indicates the ability of a particular website to appear fully functional on several browsers, available in the market. This means that the HTML coding of the website and the scripts on that website must be compatible to run on the browsers. It is of immense importance today when there is a large variety of web browsers available.

Conclusion-

The initial value for the border-image-source property in CSS is 'none'. This property is applicable to all elements except the internal table elements in case if the border-collapse value is 'collapse'. It is also applicable to the '::first-letter'. It is not an inherited property. The computed value of this property is 'none'. The animation type for this property is 'discrete'.