CSS - border-image-outset Property

This property specifies how much the border image area extends beyond the border box.

Possible Values

  • length − Any length unit value specifying how far from the border the image will appear. The defaukt value is 0.

  • number − It represents multiples of the border-width.

  • initial − It sets the default value to the property.

  • inherit − It inherits the property from the parent element.

Applies to

All the HTML elements.

DOM Syntax

object.style.borderImageOutset = "10px";

Example

Following example demonstrates this property. Here we place border image 15 pixels outside the border edges of an element:

<html>
<head>
   <style>
     .box {
       width: 200px;
       height: 200px;
       margin-left:50px;
       border:red solid;
       background-color:#000000;
       border-image-source: url(images/border.png);
       border-image-width: 10px;
       border-image-slice: 33%;
       border-image-outset: 15px;
    }
   </style>
</head>
<body>
        <div class="box"></div>
</body>
</html>
Advertisements