border-image

< css‎ | properties
Jump to: navigation, search

border-image

This article is Ready to Use.


W3C Candidate Recommendation

Summary

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

Syntax

  • border-image: border-image-source border-image-slice border-image-width border-image-outset border-image-repeat


Values

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.


Compatibility

Do you think this data can be improved? You can ask to add by opening an issue or make a pull request.

Desktop

FeaturesChromeFirefoxInternet ExplorerOperaSafari
Basic support
7.0
prefix
?
Unknown
11
Yes
10.5
prefix
3.0
prefix
optional <border-image-slice>
?
Unknown
?
Unknown
?
Unknown
?
Unknown
?
Unknown
fill keyword
?
Yes
?
Unknown
?
Unknown
?
none
?
Partial support

Mobile

FeaturesAndroid BrowserOpera MiniOpera MobileiOS Safari
Basic support
2.1
prefix
?
none
11.0
prefix
3.2
prefix
optional <border-image-slice>
?
Unknown
?
none
?
Unknown
15.0
Yes
fill keyword
?
Partial support
?
none
?
none
15.0
Yes


Examples

View live exampleA simple example showing a <div>.

CSS

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

View live example

CSS

/* 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(http://docs.webplatform.org/w/images/d/d8/border-image.png) 30 repeat;
}

Notes

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

Border








  • border-image























Other articles