CSS3 Border (Border)

using CSS3, you can apply images to the element's border.

using CSS3border

CSS3Two new properties are provided to style the element's border in a more elegant way- border-image used to add images to the border's border-radius property, as well as properties used to create round corners without using any images.

The next section will introduce you to CSS3These new border properties, for other properties related to borders, please seeCSS BordersTutorial.

Create CSS3rounded corners

The border-The radius property can be used to create round corners. This property usually defines the shape of the outer edge of the boundary. In CSS3Before that, sliced images were used to create rather麻烦的round.

.box {
　　　　width:　300px;
　　　　height:　150px;
　　　　background: #ffb6c1;
　　　　border:　2px solid #f08080;
　　　　border-radius:　20px;
}

Add CSS3Border Image

border-The border image attribute allows you to specify an image to be used as the element's border.
The design of the border is derived from the border-The sides and corners of the image specified in the image source URL are created. The boundary images can be sliced, repeated, scaled, and stretched in various ways to fit the size of the boundary image area.

.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;
}