CSS border-end-start-radius 屬性

定義和用法

border-end-start-radius 屬性用于定義元素塊方向末尾（block-end）和行內方向起始處（inline-start）之間的圓角半徑。

注意：相關的 CSS 屬性 writing-mode、text-orientation 和 direction 定義了塊方向和行內方向。這就是為什么這些屬性也會影響 border-end-start-radius 屬性的結果。對于英文頁面，行內方向是從左到右，塊方向是向下。

如果 border-end-start-radius 屬性有兩個值，則圓角將是一個橢圓：

border-end-start-radius: 50px 100px;

如果 border-end-start-radius 屬性有一個值，則圓角將是一個圓形：

border-end-start-radius: 50px;

CSS border-end-start-radius 屬性與 border-bottom-left-radius、border-bottom-right-radius、border-top-left-radius 和 border-top-right-radius 屬性非常相似，但 border-end-start-radius 屬性依賴于塊方向和行內方向。

實例

例子 1

為某些元素的塊方向末尾和行內方向起始處添加圓角：

#example1 {
  background-color: lightblue;
  border-end-start-radius: 50px;
}
#example2 {
  background-color: lightblue;
  border-end-start-radius: 50px 20px;
}
#example3 {
  background-color: lightblue;
  border-end-start-radius: 50%;
  direction: rtl;
}
#example4 {
  background-color: lightblue;
  border-end-start-radius: 50%;
  writing-mode: vertical-rl;
}

親自試一試

例子 2：結合 direction 屬性

塊方向末尾和行內方向起始處的圓角位置受 direction 屬性的影響：

#example1 {
  border: 2px solid red;
  direction: rtl;
  border-end-start-radius: 25px;
}

親自試一試

例子 3：結合 writing-mode 屬性

塊方向末尾和行內方向起始處的圓角位置受 writing-mode 屬性的影響：

#example2 {
  border: 2px solid red;
  writing-mode: vertical-rl;
  border-end-start-radius: 25px;
}

親自試一試

CSS 語法

border-end-start-radius: 0|length|initial|inherit;

屬性值

值 描述
0 默認值。
length 定義塊方向末尾和行內方向起始處的圓角形狀。請參閱：CSS 單位。
% 以元素在對應軸上的長度的百分比定義塊此圓角形狀。
initial 將此屬性設置為其默認值。參閱 initial。
inherit 從其父元素繼承此屬性。參閱 inherit。

技術細節

默認值： 0
繼承性： 否
動畫制作： 支持。請參閱：動畫相關屬性。
版本： CSS3
JavaScript 語法： object.style.borderEndStartRadius="50px"

瀏覽器支持

表格中的數字表示首個完全支持該屬性的瀏覽器版本。

Chrome Edge Firefox Safari Opera
89.0 89.0 66.0 15.0 75.0

相關頁面

教程：CSS 圓角

參考：CSS border-bottom-left-radius 屬性

參考：CSS border-bottom-right-radius 屬性

參考：CSS border-top-left-radius 屬性

參考：CSS border-top-right-radius 屬性

參考：CSS direction 屬性

參考：CSS text-orientation 屬性

參考：CSS writing-mode 屬性