Open In App

CSS border-image-outset Property

Improve
Improve
Like Article
Like
Save
Share
Report

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 Specifies the size of 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(
            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(
            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(
            border-image-repeat: round;
            border-image-outset: initial;
            border-image-width: 20px;
        }
 
        .border4 {
            border: 10px solid transparent;
            padding: 15px;
            border-image-source: url(
            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


Last Updated : 13 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads