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