border-start-start-radius

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

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

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

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

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

構文

値

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

公式定義

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

形式文法

<length-percentage>{1,2}ここで
<length-percentage> = <length> | <percentage>

例

縦書きの時の境界の丸め

HTML

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

CSS

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

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

結果

仕様書

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

ブラウザーの互換性

BCD tables only load in the browser