CSS border-image-width Property

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

It accepts any length value, such as, px, %, em, etc.

If no value is provided, it inherits the border-width value.

Example

#

An element with a border-image-width value of 25 pixels.

An element with a border-image-width setting
<style> 
.border-image { 
  border: 25px solid transparent;
  padding: 15px;
  border-image: url(/img/css/wheatfield-with-crows.jpg) 100 round;
  border-image-width: 25px;
}
</style>

<div class="border-image">
  An element with a border-image-width setting
</div>

Syntax

border-image-width: number | % | auto | initial | inherit;

Values

#

Value Description
length Border width in pixels
number Default value is 1. Multiples of the corresponding border-width
% Size of the border image area: the width of the area for horizontal offsets, the height for vertical offsets
auto Width is the intrinsic width or height of the corresponding image slice
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different border-image-width values.

An element with a border-image-width setting
<style>
  .border-image-example {
    border: 20px solid transparent;
    padding: 30px;
    border-image: url(/img/css/wheatfield-with-crows.jpg) 100 round;
    border-image-width: 2;
  }
</style>

<div class="border-image-example">
  An element with a border-image-width setting
</div>

Browser support

This table shows when border-image-width support started for each browser.

Chrome
15.0 Oct 2011
Firefox
13.0 Jun 2012
IE/Edge
11.0 Oct 2013
Opera
15.0 May 2013
Safari
6.0 Jul 2012

You may also like

Guides