CSS border-image Property
Example
Specify an image as the border around an element:
border-image: url(border.png) 30 round;
}
Definition and Usage
The border-image
property allows you to specify an image to be used as the border around an element.
The border-image property is a shorthand property for:
- border-image-source
- border-image-slice - It will slice the border-image at specified size.
- border-image-width
- border-image-outset
- border-image-repeat
Omitted values are set to their default values.
The property whose value is not defined in the border-image
property will be set to their default value.
For the border-image
to work, the element must have a border with a color (transparent also) defined.
Default value: | none 100% 1 0 stretch |
---|---|
Inherited: | no |
Animatable: | no. |
Version: | CSS3 |
JavaScript syntax: | object.style.borderImage="url(border.png) 30 round" |
- Inherited : "Inherited = no" means that it cannot takes (inherit) it's value from it's parent element.
- object - object in javascript means the element on which
border-image
is applied. - Animatable - "Animatable = no" means that it cannot be animated with CSS
@keyframes
.
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.
Property | |||||
---|---|---|---|---|---|
border-image | 16.0 4.0 -webkit- |
11.0 | 15.0 3.5 -moz- |
6.0 3.1 -webkit- |
15.0 11.0 -o- |
Note: See individual browser support for each value below.
CSS Syntax
Property Values
Value | Description | Demo |
---|---|---|
border-image-source | The path to the image to be used as a border | |
border-image-slice | How to slice the border image | |
border-image-width | The width of the border image | |
border-image-outset | The amount by which the border image area extends beyond the border box | |
border-image-repeat | Whether the border image should be repeated, rounded or stretched | |
initial | Sets this property to its default value. | |
inherit | Inherits this property from its parent element. |
More Examples
Example
Different slice values completely changes the look of the border:
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 50 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 20% round;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30% round;
}
Comments
Post a Comment