- 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.
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.See also:
http://border-image.com/
http://www.w3.org/TR/css3-background/#border-images- Live Example
- Play with the code in the textarea below.
- Default value
- see individual properties
- Introduced in CSS version
- 3
- Applies to elements
- All elements except tables with when border-collapse set to collapse.
- Inherited
- No
- 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