border-start-end-radius

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.

border-start-end-radius は CSS のプロパティで、要素の論理的な境界の半径を定義します。これは要素の writing-mode, direction, text-orientation に応じて、物理的な境界の半径に対応づけられます。これはテキストの方向や書字方向に依存せずにスタイルを構築する際に便利です。

css
/* <length> 値 */
/* 値 1 つの場合は角を円にする */
border-start-end-radius: 10px;
border-start-end-radius: 1em;

/* 値 2 つの場合は角を楕円にする */
border-start-end-radius: 1em 2em;

/* グローバル値 */
border-start-end-radius: inherit;
border-start-end-radius: initial;
border-start-end-radius: revert;
border-start-end-radius: unset;

試してみましょう

このプロパティは、要素の block-start と inline-end の間の角に影響します。すなわち、書字方向が horizontal-tb で ltr の方向であれば、 border-top-right-radius プロパティに対応します。

構文

値

<length-percentage>

円の半径または楕円の長半径及び短半径を示します。絶対的な長さの場合は、 CSS の <length> データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント値はボックスの高さに対する値です。負の数は無効です。

公式定義

初期値0
適用対象すべての要素。ただし、ユーザーエージェントは border-collapse が collapse である場合にtable および inline-table 要素に適用する必要はない。内部表要素での動作は、今のところ未定義。。 ::first-letter にも適用されます。
継承なし
パーセント値境界ボックスの対応する寸法に対する相対値
計算値２つの絶対的な <length> または <percentage> 値
アニメーションの種類length または パーセント値, calc();

形式文法

border-start-end-radius = 
  <length-percentage [0,∞]>{1,2}  

<length-percentage> = 
  <length>      |
  <percentage>

例

縦書きの時の境界の丸め

HTML

html
<div>
  <p class="exampleText">Example</p>
</div>

CSS

css
div {
  background-color: rebeccapurple;
  width: 120px;
  height: 120px;
  border-start-end-radius: 10px;
}

.exampleText {
  writing-mode: vertical-rl;
  padding: 10px;
  background-color: #fff;
  border-start-end-radius: 10px;
}

結果

仕様書

Specification
CSS Logical Properties and Values Level 1
# border-radius-properties

ブラウザーの互換性

BCD tables only load in the browser

関連情報