CSS reference manual

CSS @rules

CSS attribute大全

CSS3 border-image-outset attribute CSS border-color attribute

CSS3 border-Usage and examples of the image property

border-The CSS image property is used to replace the border style with an image. This is a shorthand property that allows you to setborder-image-source,border-image-slice,border-image-width,border-image-outsetandborder-image-repeatAttribute

The following table provides usage instructions and version history of this attribute, as well as the syntax for using it in JavaScript scripts.

Default value:	none 100 stretch; View all properties
Applies to:	This attribute can be applied to any element, but when it comes to table elements (such as tr, th, td), the border-The border property value is 'collapse' when the border-The image attribute is invalid. It also applies to::first-letter.
Inheritance:	None
Animatable:	No.Please see Animation properties.
Version:	CSS3new feature
JavaScript syntax:	object.style.borderImage="url(border.png) 30 30 round"

border-image syntax usage

The syntax of this attribute is as follows:

border-image: [ source slice width outset repeat ] | initial | inherit

The following examples demonstrate how to use border-image attribute.

Example

.box {
　　　　width:　300px;
　　　　height:　150px;
　　　　border:　15px solid transparent;
　　　　-webkit-border-image: url("border.png")　30　30 round;　/*　Safari　3.1-5　*/
　　　　-o-border-image: url("border.png")　30　30 round;　/*　Opera　11-12.1　*/
　　　　border-image: url("border.png")　30　30 round;
}

Test see‹/›

Attribute values

The following table describes the values of this attribute.

Value	Description
border-image-source	Specify the position of the image to be used for the border.
border-image-slice	Specify the inward offset from the top, right, bottom, and left edges of the border image.
border-image-width	Specify the width of the border.
border-image-outset	Specify the number of units outside the border that the border image area exceeds.
border-image-repeat	Specify how to scale or tile the middle part of the border image to match the size of the border.
initial	Set this property to its default value.
inherit	If specified, the associated element adopts its parent element's border-image attribute values.

Browser compatibility

border-Browser compatibility of the image attribute, the numbers in the following table represent the minimum version number of the browser that supports this attribute; all mainstream browsers support this attribute.

	Firefox 3.5+ ^-moz-,15 + Google Chrome 4+ ^-webkit-,16 + Internet Explorer 11+ Apple Safari 3.1+ ^-webkit-,6+ Opera 11+ ^-o-,15+ ^-webkit-