CSS3 rounded corners

CSS3 rounded corners

##CSS3 border-radius property

Using the CSS3 border-radius property, you can make "rounded corners" for any element.

Examples

The following are three examples of rounded corners

PHP中文网（php.cn)

border-radius 属性允许向元素添加圆角。

指定背景颜色元素的圆角:

圆角

指定边框元素的圆角:

圆角

指定背景图片元素的圆角:

圆角

Run the program and try it

CSS3 border-radius - specify each rounded corner

If you specify only one value in the border-radius property, 4 rounded corners will be generated .

However, if you want to specify the four corners one by one, you can use the following rules:

Four values: The first value is the upper left corner, the second value is the upper right corner , the third value is the lower right corner, and the fourth value is the lower left corner. Three values: the first value is the upper left corner, the second value is the upper right corner and the lower left corner, the third value is the lower right corner. Two values: the first value is the upper left corner and the lower right corner, the second value is There is one value in the upper right corner and the lower left corner: The four rounded corners have the same value

The following are three examples:

PHP中文网（php.cn)

四个值 - border-radius: 15px 50px 30px 5px:

三个值 - border-radius: 15px 50px 30px:

两个值 - border-radius: 15px 50px:

Run the program and try it

Create elliptical corners

PHP中文网（php.cn)

椭圆边框 - border-radius: 50px/15px:

椭圆边框 - border-radius: 15px/50px:

椭圆边框 - border-radius: 50%:

Run the program and try it