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: unset;

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

構文

値

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

公式定義

初期値0
適用対象all elements; but User Agents are not required to apply to table and inline-table elements when border-collapse is collapse. The behavior on internal table elements is undefined for the moment.。 ::first-letter にも適用されます。
継承なし
パーセンテージrefer to the corresponding dimension of the border box
計算値２つの絶対的な length 又は <percentage> 値
アニメーションの種類length または percentage, calc();

形式文法

<length-percentage>{1,2}
where 
<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;
}

結果

仕様書

仕様書 状態 備考
CSS Logical Properties and Values Level 1
border-start-start-radius の定義		 編集者草案 Initial definition.

ブラウザーの互換性

BCD tables only load in the browser

関連情報