border-image

Description

Border-image enables the use of images as borders. It overrides the border-style property which can act as a fallback if the image is unavailable or border-image in not supported.
Border-image is shorthand for the following properties with there initial values:
border-image-source: none;
border-image-slice: 100%;
border-image-width: 1;
border-image-outset: 0;
border-image-repeat: stretch;

The image can be sliced using 4 length values: top, right, bottom, left. Which creates a grid of 9 areas, the 4 corners, 4 sides and the center which is unused.
border-image example
The image will be scaled to fit the border-width if necessary.

When using a border image you can reduce the dimensions of the image as the sides can be repeated or stretched.
border-image example 2
Currently support for the shortcut border-image seems better then the individual properties.
Not all browsers browsers fall back to the border-style if the image is unavailable.

Live Example

Play with the code in the textarea below.

<!doctype html>
<html>
<head>
<title>CSS3 Border-image</title>
<style type="text/css">
img{
   padding:5px;
   border:double red 20px;
   margin:10px;
}

.bimg{
  -moz-border-image: url(/files/frame3.png) 95 95 95 95 stretch;
  -webkit-border-image: url(/files/frame3.png) 95 95 95 95 stretch;
  -o-border-image: url(/files/frame3.png) 95 95 95 95 stretch;
  border-image: url(/files/frame3.png) 95 95 95 95 stretch;
  border-style: groove;
}
.rotate{
  -o-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}

.shadow{
  box-shadow:7px 7px 5px #666;
}

.ten{border-width:10px;}
.fifty{border-width:50px;}

.nobim{
  -webkit-border-image: url(no-img.png) 95 95 95 95 stretch;
  -moz-border-image: url(no-img.png) 95 95 95 95 stretch;
  -o-border-image: url(no-img.png) 95 95 95 95 stretch;
  border-image: url(no-img.png) 95 95 95 95 stretch;
}

.noprefix{
  border-image: url(frame3.png)95 95 95 95 stretch; 
}
</style>
</head>
<body>
<img src="/files/cockatoo3.jpg" class="bimg" alt="cockatoo" />

Default value

see individual properties

Introduced in CSS version

Applies to elements

All elements except tables with when border-collapse set to collapse.

Inherited

Browser Support

Browsers	IE	Firefox	Safari	Opera	Chrome
Versions	unknown	15	6.0	-o-	16

Belongs to:

Border and Layout

See the full list CSS properties and browser support: CSS Properties

User login

Navigation