XHTML-Lab

Border-image

Published on: 24-Jun-2011 | In category: CSS3 Reference | 0 comments

Advertisement

• Tweet
• 
• Email

• Tweet
• 
• Email

With this property you can define an image to be used instead of the normal border of an element. This property is a shorthand property for setting ‘border-image-source’, ‘border-image-slice’, ‘border-image-width’, ‘border-image-outset’ and ‘border-image-repeat’.

Value

• border-image-source - The path to the image to be used as a border
• border-image-slice -The inward offsets of the image-border
• border-image-width - The widths of the image-border
• border-image-outset - The amount by which the border image area extends beyond the border box
• border-image-repeat - Whether the image-border should be repeated, rounded or stretched

Example

div
{-moz-border-image:url(border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */
border-image:url(border.png) 30 30 round;}


Technical Specifications

Inherit	yes
Media	visual
CSS Support	CSS3
Values	<’border-image-source’> || <’border-image-slice’> [ / <'border-image-width'>? [ / <'border-image-outset'> ]? ]? || <’border-image-repeat’>
Initial Value	depends on individual properties
Applies to	all elements
W3C	w3c documentation

Browser compatibility chart

	5.5	6.0	7.0	8.0
	1.0	1.5	2.0	3.0	3.5
	9.2	9.5	10.0
	1.3	2.0	3.1	4.0
	2.0
	Full Support
	Partial Support (Buggy)
	No Support

Note: No versions of Internet Explorer (including IE8) support the property value “inherit”.