border-radius

簡寫屬性語法:

border-radius:[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

預設值看每個獨立屬性

適用於:所有元素

繼承性:無

動畫性:看每個獨立屬性

計算值:看每個獨立屬性

媒 體:視覺

分拆獨立屬性語法:

border-*-radius:[ <length> | <percentage> ]{1,2}

border-*-radius = border-top-left-radius,border-top-right-radius,border-bottom-right-radius,border-bottom-left-radius

預設值0

適用於:所有元素

繼承性:無

動畫性:是

計算值:絕對值或百分比

媒 體:視覺

取值:

<length>
用長度值定義圓形半徑或橢圓的半長軸,半短軸。不允許負值
<percentage>
用百分比定義圓形半徑或橢圓的半長軸,半短軸。水平方向百分比參照元素寬度(非內容寬度),垂直方向參照元素高度。不允許負值

說明:

簡寫屬性。定義元素的圓角。
  • border-radius屬性提供 2 個參數,參數間以/分隔,每個參數允許設定 1~4 個參數值,第 1 個參數表示水平半徑或半軸,第 2 個參數表示垂直半徑或半軸,如第 2 個參數值省略未定義,則直接複製第 1 個參數值。

    舉個例子:

    水平與垂直半軸
    (圖一)此圖來源於 w3.org
    .demo { border: 10px solid black; border-radius: 55pt/25pt; } <div class="demo"> 演示水平、垂直半徑或半軸 </div>

    能看到此時 55pt 被應用於橢圓的水平半軸,25pt 被應用於垂直半軸。

  • 水平半徑或半軸:如果提供全部四個參數值,將按上左 top-left上右 top-right下右 bottom-right下左 bottom-left的順序作用於四個角;提供三個,第一個用於top-left,第二個用於top-rightbottom-left,第三個用於bottom-right;提供兩個,第一個用於top-leftbottom-right,第二個用於top-rightbottom-left;只提供一個,將用於全部的四個角。
  • 垂直半徑或半軸也遵循以上 4 點。
  • 對應的腳本特性為borderRadius
分拆獨立屬性屬性。定義元素的單個圓角。
  • border-*-radius屬性提供 2 個參數,參數間以空格分隔,每個參數允許設定 1 個參數值,第 1 個參數表示水平半徑或半軸,第 2 個參數表示垂直半徑或半軸,如第 2 個參數值省略未定義,則直接複製第 1 個參數值。

    以分拆獨立屬性來實現圖一:

    .demo { border-top-left-radius: 55pt 25pt; border-top-right-radius: 55pt 25pt; border-bottom-right-radius: 55pt 25pt; border-bottom-left-radius: 55pt 25pt; }

    這段程式碼等同於 border-radius: 55pt/25pt

  • 對應的腳本特性分別為:borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, borderBottomLeftRadius

兼容性:

  • 淺綠 = 支援
  • 紅色 = 不支援
  • 粉色 = 部分支援
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 8.0+ 40.0+ 40.0+ 8.0+ 40.0+ 8.0+ 4.4+ 28.0+
9.0+

示例: