CSS3 border

CSS3 Rounded Corners

With the CSS3 border-radius property,you can give any element "rounder corners"

CSS3 border-radius Property

        #rcorners1 {            color: aqua;font-size: 22px;border-radius: 25px; background: darkseagreen; padding: 20px; width: 200px; height: 150px;        }        #rcorners2{            color: aqua;font-size: 22px;border-radius: 25px; border: 2px solid darkmagenta; padding: 20px; width: 200px; height: 150px;        }        #rcorners3{            color: aqua;font-size: 22px;border-radius: 25px; background: url(01.png); background-repeat: repeat;background-position: left top; padding: 20px; width: 200px; height: 150px;        }

CSS3 border-radius-Specify Each Corner

border-radius: 10px 40px 60px 30pxborder-radius:10px 20px 30pxborder-radius:10px 50px

CSS3 Rounded Corners Properties

border-radius    border-top-left-radius    border-top-right-radius   border-bottom-right-radius   border-bottom-left-radius

CSS3 Border Images

With the CSS3 border-image property,you can set an image to be used the border around an element.

CSS3 border-image Property

The CSS3 border-image property allows you to specify an image to be used instead of the normal border around an element.

The property has three parts:

1 The image to use as the border

2 Where to slice the image

3 Define whether the middle sections should be repeated or stretched

Note:For border-image to work,the element also needs the border property set

        #borderImage{            border: 10px solid transparent; padding: 15px;            -webkit-border-image: url(border.png) 30 round;            -o-border-image: url(border.png) 30 round;            border-image: url(border.png) 30 round;        }