Hurry! Try our new Interactive Courses for FREE. 🥳   🚀

CSS border-image-outset Property

The border-image-outset property in CSS asserts the distance through which the border image of an element is set out of its border box or container. The parts of border image which are rendered outside of the border box of the element with the border-image-outset, do not trigger the overflow scrollbars and do not capture the mouse events.

Syntax for border-image-outset property:

Following is the syntax for the border-image-outset property.

border-image-outset: value;

CSS border-image-outset property values:

Let's see what values this property can have and what do those values do:

Value Description
length This value asserts the size of the border-image outset in the form of a dimension ( any number with a unit )
number This value asserts the size of the border-image outset in the form of a multiple of the corresponding border-widths of the element.

Example: CSS border-image-outset Property

Here in the example below, we are using the border-image-outset property with different border images, colors, and different values. In this case, we have given the border-image-outset value using the length value i.e; 1.5. The CSS styling is done inside the opening and closing head tags of the HTML.

<!DOCTYPE html>
<html>
<head>
	<title>Border-image-outset property in CSS</title>
	<style type="text/css">
		#outset {
		  width: 10rem;
		  background: #cef;
		  border: 1.4rem solid;
		  border-image: radial-gradient(#ff2, #55f) 40;
		  border-image-outset: 1.5;  
		  margin: 2.1rem;
		}
	</style>
</head>

<body>
	<div id="outset">Study Tonight is the best place for learning digital !</div>
</body>
</html>

Output:

Example 2: CSS border-image-outset Property

Here in the example below, we are using the border-image-outset property with different border images, colors, and different values. In this case, we have given the border-image-outset value using the top, right, bottom, left values i.e; 5px 10px 10px 5px. The CSS styling is done inside the opening and closing head tags of the HTML.

<!DOCTYPE html>
<html>
<head>
	<title>Border-image-outset property in CSS</title>
	<style type="text/css">
		#outset {
		  width: 10rem;
		  background: skyblue;
		  border: 1.4rem solid;
		  border-image: radial-gradient(red, pink) 40;
		  border-image-outset: 5px 10px 10px 5px;  
		  margin: 2.1rem;
		}
	</style>
</head>
<body>
	<div id="outset">Study Tonight is the best place for learning digital !</div>
</body>
</html>

Output:

Browser Compatibility

There are many browsers that do not support all the latest CSS properties. Hence, while developing any webpage, if you are using any CSS property you must check the browser compatibility for that CSS property and then use it. It is of immense importance today when there is a large variety of web browsers available.

Name of Browser Background size contain and cover
Chrome 15 15
Edge 12 12
Firefox 15 15
Internet Explorer 11 11
Opera 15 15
Safari 6 6
Webview Android 37 37
Chrome Android 18 18
Firefox Android 15 15
Opera Android 14 14
IOS Safari 6 6
Samsung Internet 1.0 1.0

Conclusion

The initial value for the border-image-outset property is zero. This property is applicable to all elements and also to ::first-letter. It is not an inherited property. The computed value for this property is the as specified one while with the relative lengths, it is converted into absolute lengths. The animation type for this property is by the computed value type.