# CSS3 border-radius 屬性 ## 實例 向 div 元素添加圓角邊框： ``` div { border:2px solid; border-radius:25px; } ``` 頁面底部有更多實例。 ## 瀏覽器支持 | IE | Firefox | Chrome | Safari | Opera | | --- | --- | --- | --- | --- | IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 屬性。 ## 定義和用法 border-radius 屬性是一個簡寫屬性，用于設置四個 border-*-radius 屬性。 提示：該屬性允許您為元素添加圓角邊框！ | 默認值： | 0 | | --- | --- | | 繼承性： | no | | --- | --- | | 版本： | CSS3 | | --- | --- | | JavaScript 語法： | _object_.style.borderRadius="5px" | | --- | --- | ## 語法 ``` border-radius: _1-4 length_|_%_ / _1-4 length_|_%_; ``` 注釋：按此順序設置每個 radii 的四個值。如果省略 bottom-left，則與 top-right 相同。如果省略 bottom-right，則與 top-left 相同。如果省略 top-right，則與 top-left 相同。 | 值 | 描述 | 測試 | | --- | --- | --- | | _length_ | 定義圓角的形狀。 | [測試](/tiy/c.asp?f=css_border-radius) | | _%_ | 以百分比定義圓角的形狀。 | [測試](/tiy/c.asp?f=css_border-radius&p=6) | ### 例子 1 ``` border-radius:2em; ``` 等價于： ``` border-top-left-radius:2em; border-top-right-radius:2em; border-bottom-right-radius:2em; border-bottom-left-radius:2em; ``` ### 例子 2 ``` border-radius: 2em 1em 4em / 0.5em 3em; ``` 等價于： ``` border-top-left-radius: 2em 0.5em; border-top-right-radius: 1em 3em; border-bottom-right-radius: 4em 0.5em; border-bottom-left-radius: 1em 3em; ``` ## 相關頁面 CSS3 教程：[CSS3 邊框](/css3/css3_border.asp "CSS3 邊框")