border-image-width - HTML CSS CSS Property

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

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

Description

The border-image-width CSS property sets the width of the image border.

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

Item Value
Default value: 1
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-width:      [ length | percentage | number | auto ] 1 to 4 values | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
length Set the border image width in absolute or relative units.
percentage Set the width as a percentage of the element.
number list of computed value of the element's border-width property, or the width of the border box.
auto Set width to the intrinsic width, or height, of the corresponding image slice.
initialSets this property to its default value.
inherittake the value of its parent element border-image-width property.

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

Demo Code

ResultView the demo in separate window 

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

Related Tutorials