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:
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.
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.
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.
- Default value
- see individual properties
- Introduced in CSS version
- Applies to elements
- All elements except tables with when border-collapse set to collapse.
- Browser Support
Browsers IE Firefox Safari Opera Chrome Versions unknown 15 6.0 -o- 16
See the full list CSS properties and browser support: CSS Properties