CSS border-image-outset Property

February 10, 2021 12:37 pm IST

You are Here:

CSS border-image-outset Property

CSS border-image-outset property sets the distance by which an element's border image is set out from its border box.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ min-height:50px; width: 200px; background: #f2f2f2; text-align: center; margin: 50px; border-width: 50px; border-style: solid; border-image: url("car-left.png") 95% round; border-image-outset: 25px; } </style> </head> <body> <h1>CSS border-image Property</h1> <div id="point"> border-image-outset: 25px; </div> </body> </html>

Run

Syntax

Using CSS

element{ border-image-outset: 25px; }

Using Javascript

object.style.borderImageOutset="25px";

Animatable

Yes, border-image-outset property is animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS border-image-outset property is 0.

Property Value

The following table provides a list of values for CSS border-image-outset property.

Value	Explanation
length	Allows you to define the border-image-outset in any CSS length unit.
Number	The size of the border-image outset as a multiple of the element's corresponding border-widths.

Using JavaScript

In the following example, we will demonstrate how to set the CSS border-image-outset property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ min-height: 50px; width: 200px; background: #f2f2f2; text-align: center; margin: 50px; border-width: 50px; border-style: solid; border-image: url("car-left.png") 95% round; } </style> </head> <body> <h1>CSS border-image-outset Property</h1> <div> This is div container. </div> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("div")[0]; function myFunction(){ x.style.borderImageOutset = "25px"; } </script> </body> </html>

Run