CSS border-image Property

❮ Previous Reference Next ❯

Example

#example1 { 
  border: 10px solid transparent;
  padding: 10px;
  border-image: url("border.png") 30 round;
}

#example2 { 
  border: 10px solid transparent;
  padding: 10px;
  border-image: url("border.png") 30 stretch;
}
Try this code ❯



Hello World!

Meaning

The border-image CSS property draws an image around a given element. It replaces the element's regular border.

This property is a shorthand for the following CSS properties:

Note: You should specify a separate border-style in case the border image fails to load. Although the specification doesn't strictly require it, some browsers don't render the border image if border-style is none or border-width is 0.

Default value:none 100% 1 0 stretch
Inherited:No
Animatable:No
Version:CSS3
JavaScript syntax:
object.style.borderImage=" [ source slice width outset repeat ] |initial|inerit|revert|revert-layer|unset";


Standard Syntax

border-image: [ source slice width outset repeat ]|initial|inherit|revert|revert-layer|unset;


Browser Support

The numbers in the table specify the first browser version that fully supports the property.



Status





Property Values

The following table describes the values of this property.

Value Description
border-image-source Specifies the location of the image to be used for the border.
border-image-slice Specifies the inward offsets from the top, right, bottom, and left edges of the border image.
border-image-width Specifies the width of the border.
border-image-outset Specifies the amount by which the border image area extends beyond the border box.
border-image-repeat Specifies how the middle part of the border image are scaled or tiled so that it can match the size of the border.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element animation-delay property.
revert Reverts the cascaded value of the property from its current value to the value the property
revert-layer Rollback styles to the ones specified in previous cascade layers.
unset Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.


Default CSS Property Values

selectors {
  border-image: none 100% 1 0 stretch;
}
❮ Previous Reference Next ❯