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.
