border-image-outset - HTML CSS CSS Property

HTML CSS examples for CSS Property:border-image-outset

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. border-image-outset

Description

The border-image-outset CSS property sets how the border image area would extend beyond the border box.

The following table summarizes the border-image-outset Property.

Item Value
Default value: 0
Applies to:All elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter.
Inherited: No
Animatable: No.

Syntax

The syntax of the property is as follows: 


border-image-outset:      length | number | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
length Set the distance in units that the border image extends beyond the border box. Negative values are not allowed.
number computed value of border-width, or the width of the border box. Negative values are not allowed.
initial Sets this property to its default value.
inherit take the value of its parent element border-image-outset property.

The example below shows the border-image-outset property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 border-image-outset Property</title>
  <style type="text/css">
  .box {<!--from  ww  w  .j  av a2s .c  om-->
    width: 300px;
    height: 150px;
    margin: 50px;
    border: 15px solid transparent;
    border-image-source: url("https://www.java2s.com/style/demo/Opera.png");
    border-image-slice: 30;
    border-image-outset: 15px;
  }
</style>
 </head>
 <body>
  <div class="box"></div>
 </body>
</html>

Related Tutorials