CSS border-image-outset Property

The CSS border-image-outset property is a shorthand property used to specify the distance by which an element's border image is placed outside its box.

Note: The border-image-outset takes effect on the picture specified by the border-image-source.

Syntax:

border-image-outset: value;

Property Values:

Value	Effect
Length	Specify the size of the border outset as dimensions.
Number	Specifies the size of the border as the multiple of the corresponding border-width.
Initial	Specifies the size of the border to be the default size.
Inherit	Inherits the value from its parent element.

Example: In this example, we are using the above-explained approach.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            text-align: center;
        }

        h1 {
            color: green;
        }

        .border1 {
            border: 10px solid transparent;
            padding: 15px;
            border-image-source: url(
'https://media.geeksforgeeks.org/wp-content/uploads/border1-2.png');
            border-image-repeat: round;
            border-image-width: 20px;
            border-image-slice: 30;
            border-image-outset: 10px 20px 12px 9px;
        }

        .border2 {
            border: 10px solid transparent;
            padding: 15px;
            border-image-source: url(
'https://media.geeksforgeeks.org/wp-content/uploads/border1-2.png');
            border-image-repeat: round;
            border-image-outset: 1;
            border-image-slice: 30;
            border-image-width: 20px;
        }

        .border3 {
            border: 10px solid transparent;
            padding: 15px;
            border-image-source: url(
'https://media.geeksforgeeks.org/wp-content/uploads/border1-2.png');
            border-image-repeat: round;
            border-image-outset: initial;
            border-image-width: 20px;
        }

        .border4 {
            border: 10px solid transparent;
            padding: 15px;
            border-image-source: url(
'https://media.geeksforgeeks.org/wp-content/uploads/border1-2.png');
            border-image-repeat: round;
            border-image-outset: inherit;
            border-image-width: 20px;
        }

        div {
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>border-image-outset property</h2>
    <div class="border1">Border 1(Length)</div>
    <div class="border2">Border 2(Number)</div>
    <div class="border3">Border 3(Initial)</div>
    <div class="border4">Border 4(Inherit)</div>
</body>
</html>

Output: Browser Support: The browser supported by the border-image-outset property are listed below:

Chrome-15.0
Edge-12.0
Internet Explorer - 11.0
Firefox-15.0
Opera-15.0
Safari-6.0

CSS border-image-outset Property

Explore