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

Syntax

  • !important: declaration
  • -ms-flex-pack: center
  • -ms-flex-pack: end
  • -ms-flex-pack: justify
  • -ms-flex-pack: start
  • align-content: center
  • align-content: flex-end
  • align-content: flex-start
  • align-content: space-around
  • align-content: space-between
  • align-content: stretch
  • align-items: baseline
  • align-items: center
  • align-items: flex-end
  • align-items: flex-start
  • align-items: stretch
  • align-self: auto
  • align-self: baseline
  • align-self: center
  • align-self: flex-end
  • align-self: flext-start
  • align-self: stretch
  • alignment-adjust: <length>
  • alignment-adjust: <percentage>
  • alignment-adjust: after-edge
  • alignment-adjust: alphabetic
  • alignment-adjust: auto
  • alignment-adjust: baseline
  • alignment-adjust: before-edge
  • alignment-adjust: central
  • alignment-adjust: hanging
  • alignment-adjust: ideographic
  • alignment-adjust: mathematical
  • alignment-adjust: middle
  • alignment-adjust: text-after-edge
  • alignment-adjust: text-before-edge
  • all-space-treatment: collapse
  • all-space-treatment: preserve
  • animation-delay: <time>
  • animation-direction: alternate
  • animation-direction: alternate-reverse
  • animation-direction: normal
  • animation-direction: reverse
  • animation-duration: <time>
  • animation-fill-mode: backwards
  • animation-fill-mode: both
  • animation-fill-mode: forwards
  • animation-fill-mode: none
  • animation-iteration-count: <single-animation-iteration-count>
  • animation-iteration-count: infinite
  • ... further results


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

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 (almost)

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 (almost)
?
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

Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic Support ?
10 -webkit
15
3.5 -moz
Unsupported
?
10 -o
?
4 -webkit

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic support ? ? ? ? ? ? ? ?

The given value was not understood.

Compatibility notes

Browser Version Note
Firefox 15+ As required by the final specification, the unprefixed version requires border-style to be different than 'none' or border-image will be ignored.
Chrome, Safari, Opera All Implement an early version of the spec and incorrectly display border-image when border-style is 'none'.

See also

Related articles

The given value was not understood.

Border









  • border-image























Other articles

The given value was not understood.