border-radius

版本： CSS3

CSS属性 border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。该属性是一个简写属性，是为了将这四个属性 border-top-left-radius 、 border-top-right-radius 、 border-bottom-right-radius ，和 border-bottom-left-radius 简写为一个属性。

例如: 

border-radius: 1em/5em;

/* 等价于： */

border-top-left-radius:     1em 5em;
border-top-right-radius:    1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius:  1em 5em;

border-radius: 4px 3px 6px / 2px 4px;

/* 等价于： */

border-top-left-radius:     4px 2px;
border-top-right-radius:    3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius:  3px 4px;

浏览器支持

IE浏览器 火狐浏览器 opera浏览器 chrome浏览器 safari浏览器
IE9以上版本的浏览器都支持 border-radius

语法

font-size : <length-percentage>{1,4} [ / <length-percentage>{1,4} ?
  • 设置或检索对象使用圆角边框。提供2个参数，以“ / ”分隔。
  • 第1个参数表示圆角的水平半径，第2个参数表示圆角的垂直半径。若第2个参数省略，则默认其值等于第1个参数的值。
  • 水平半径（或垂直半径）允许设置1~4个参数值。

    • 水平半径（或垂直半径）参数值

    • 如果提供全部四个参数值，将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。
    • 如果提供三个参数值，第一个用于上左(top-left)，第二个用于上右(top-right)、下左(bottom-left)，第三个用于下右(bottom-right)。
    • 如果提供两个参数值，第一个用于上左(top-left)、下右(bottom-right)，第二个用于上右(top-right)、下左(bottom-left)。
    • 如果只提供一个参数值，将用于全部的于四个角。

    取值：

    <length-percentage>：取值 <length> | <percentage>

    • <length> ：定义圆形半径或椭圆的半长轴，半短轴。负值无效。
    • <percentage> ：使用百分数定义圆形半径或椭圆的半长轴，半短轴。水平半径值是相对于盒模型的宽度值的百分比；垂直半径值是相对于盒模型的高度值的百分比。负值无效。
    • inherit ：表示四个值都从父元素计算值继承。

    例子 

border: solid 10px;
/* the border will curve into a 'd' */  
border-radius: 10px 40px 40px 10px;

border: groove 1em red;  
border-radius: 2em;

background: gold;
border: ridge gold;
border-radius: 13em/3em; 

border: none;
border-radius: 40px 10px;  

border: none;
border-radius: 50%; 

p{
 width:100px;
 height:100px;
 line-height:100px;
 text-align:center;
 border:1px solid #ed28bb;
 border-radius:10px 54px 20px;
}

效果图：

border-radius圆角css属性

下篇： border-top-left-radius