CSS border-top-right-radius 屬性
示例
為兩個 <div> 元素新增圓角邊框到右上角
#example1 {
border: 2px solid red;
border-top-right-radius: 25px;
}
#example2 {
border: 2px solid red;
border-top-right-radius: 50px 20px;
}
自己動手試一試 »
更多“自己嘗試”的例子見下文。
定義和用法
border-top-right-radius 屬性定義了右上角的半徑。
提示：此屬性允許您為元素新增圓角邊框！
| 預設值 | 0 |
|---|---|
| 繼承 | no |
| 可動畫 | 是。 閱讀有關animatable的內容 嘗試一下 |
| 版本 | CSS3 |
| JavaScript 語法 | object.style.borderTopRightRadius="25px" 嘗試一下 |
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| border-top-right-radius | 5 | 9 | 4 | 5 | 10.5 |
CSS 語法
border-top-right-radius: length|% [length|%]|initial|inherit;
注意： 如果設定了兩個值，第一個值用於頂部邊框，第二個值用於右側邊框。如果第二個值被省略，它將從第一個值複製。如果任何一個長度為零，則該角是方形的，而不是圓角。
屬性值
| 值 | 描述 | 演示 |
|---|---|---|
| length | 定義右上角的形狀。 閱讀有關長度單位的內容 | 演示 ❯ |
| % | 以 % 定義右上角的形狀 | 演示 ❯ |
| initial | 將此屬性設定為其預設值。閱讀關於initial | |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit |
更多示例
示例
以百分比新增圓角邊框到右上角
#example1 {
border: 2px solid red;
background: url(paper.gif);
padding: 10px;
border-top-right-radius: 40%;
}
自己動手試一試 »
相關頁面
CSS 教程: CSS 圓角
HTML DOM 參考： borderTopRightRadius 屬性
