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:
- Chrome-15.0
- Edge-12.0
- Internet Explorer – 11.0
- Firefox-15.0
- Opera-15.0
- Safari-6.0