The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.


< css‎ | properties
Jump to: navigation, search


This article is Ready to Use.

W3C Candidate Recommendation


Shorthand property that defines an image to be displayed and its positioning, instead of a solid color, for 'border' property. It can be used to set border-image-source, border-image-slice, border-image-width, border-image-outset and border-image-repeat, or a subset of these.

Overview table

Initial value based on individual properties
Applies to All elements
Inherited No
Media visual
Computed value based on individual properties
Animatable No
CSS Object Model Property borderImage
Percentages N/A



border-image-source border-image-slice border-image-width border-image-outset border-image-repeat
The border-image property can contain up to five components:
  • border-image-source: This can take a valid "CSS images: url()" as its value.
  • border-image-slice: This takes any of the values available to the border-image-slice property, which includes <number>, <percentage> and fill. For more details about each, see the border-image-slice page.
  • border-image-width: This takes a numeric value with any of the standard length units.
  • border-image-outset: This takes a numeric value with any of the standard length units.
  • border-image-repeat: This takes any of the type of values available to the border-image-repeat property, which includes stretch, repeat, round and space. For more details about each, see the border-image-repeat page.


A simple example showing a <div>.


<div class="pattern">one</div>

View live example


/* General setup of the containers */
div {
	height: 100px;
	width: 100px;
	margin: 25px; 
	text-align: center;
	line-height: 100px;
	font-family: sans-serif;

.pattern {
	border: 30px solid transparent;
	border-image: url( 30 repeat;

View live example


border-image-slice: fill was introduced in latest recommendation and breaks backwards compatibility. If you want border-image to fill an inner area of your block you have to use this property.

Compatibility with other properties

border-radius has no effect on border-image.

Related specifications

Specification Status Related Changes
CSS Backgrounds and Borders Module Level 3 W3C Candidate Recommendation

See also

Related articles


Other articles