CSS ボーダーエンドスタート半径属性

定義と使用法

border-end-start-radius 属性は、要素のブロック方向の終わり（block-end）とインライン方向の始まり（inline-start）の間の角の半径を定義するために使用されます。

注意：関連するCSS属性 writing-mode、text-orientation および direction ブロック方向とインライン方向を定義します。これがこれらの属性が影響する理由です。 border-end-start-radius 属性の結果。英語のページでは、インライン方向は左から右、ブロック方向は下に向かいます。

もし border-end-start-radius 属性に値が2つあれば、角は楕円形になります：

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

もし border-end-start-radius 属性に値が1つあれば、角は丸くなります：

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;

属性値

技術的詳細

ブラウザのサポート

テーブルの数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。

関連ページ

チュートリアル：CSS 角丸

参照：CSS ボーダーボトム左下角半径属性

参照：CSS ボーダーボトム右下角半径属性

参照：CSS border-top-left-radius 属性

参照：CSS border-top-right-radius 属性

参照：CSS direction 属性

参照：CSS text-orientation 属性

参照：CSS writing-mode 属性