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 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 border to be default size. |
| Inherit | Inherits the value from its parent element. |
Example Program:
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 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
Please Login to comment...