[CSS参考手册](http://css.doyoe.com/)»[属性列表](#)»[边框属性](#)» 相关内容： [**其它边框属性参考**选择其它项](#) - [border](#) - [border-width](#) - [border-style](#) - [border-color](#) - [border-top](#) - [border-top-width](#) - [border-top-style](#) - [border-top-color](#) - [border-right](#) - [border-right-width](#) - [border-right-style](#) - [border-right-color](#) - [border-bottom](#) - [border-bottom-width](#) - [border-bottom-style](#) - [border-bottom-color](#) - [border-left](#) - [border-left-width](#) - [border-left-style](#) - [border-left-color](#) - [border-image](#) - [border-radius](#) - [border-top-left-radius](#) - [border-top-right-radius](#) - [border-bottom-right-radius](#) - [border-bottom-left-radius](#) - [box-shadow](#) - [box-reflect](#) # border-radius - **版本：CSS3** - 继承性：无 ### 语法： **border-radius**：[ [<length>](#) | [<percentage>](#) ]{1,4} [ / [ [<length>](#) | [<percentage>](#) ]{1,4} ]? **默认值**：0 ### 取值： [<length>](#)：用长度值设置对象的圆角半径长度。不允许负值[<percentage>](#)：用百分比设置对象的圆角半径长度。不允许负值 ### 说明： **设置或检索对象使用圆角边框。提供2个参数，2个参数以“/”分隔，每个参数允许设置1~4个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数** - 水平半径：如果提供全部四个参数值，将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。 - 如果只提供一个，将用于全部的于四个角。 - 如果提供两个，第一个用于上左(top-left)、下右(bottom-right)，第二个用于上右(top-right)、下左(bottom-left)。 - 如果提供三个，第一个用于上左(top-left)，第二个用于上右(top-right)、下左(bottom-left)，第三个用于下右(bottom-right)。 - 垂直半径也遵循以上4点。 - 对应的脚本特性为**borderRadius**。 ### 兼容性： - 浅绿 = 支持 - 红色 = 不支持 - 墨绿 = 部分支持 - 橙色 = 实验性质 <table class="gdataform"><thead><tr><th><a href="#browser" title="查看本文档测试时所用浏览器版本">支持版本</a>\类型</th> <th><span class="browser-ie">IE</span></th> <th><span class="browser-firefox">Firefox</span></th> <th><span class="browser-safari">Safari</span></th> <th><span class="browser-chrome">Chrome</span></th> <th><span class="browser-opera">Opera</span></th> </tr></thead><tbody><tr><th>较早版本</th> <td class="unsupport">6.0-8.0</td> <td rowspan="2" class="support">4.0</td> <td rowspan="2" class="support">5.1</td> <td rowspan="2" class="support">13.0</td> <td rowspan="2" class="support">11.50</td> </tr><tr><th>较新版本</th> <td class="support">9.0</td> </tr></tbody></table> ### 示例： ### 水平与垂直半径相同时： - 提供1个参数 border-radius:10px; - 提供2个参数 border-radius:10px 20px; - 提供3个参数 border-radius:10px 20px 30px; - 提供4个参数 border-radius:10px 20px 30px 40px; ### 水平与垂直半径不同时： - 提供1个参数 border-radius:10px/5px; - 提供2个参数 border-radius:10px 20px/5px 10px; - 提供3个参数 border-radius:10px 20px 30px/5px 10px 15px; - 提供4个参数 border-radius:10px 20px 30px 40px/5px 10px 15px 20px; Copyright © 2006-2012 [Doyoe](http://www.doyoe.com/). All Rights Reserved