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

css
/* <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-tbltr の方向であれば、 border-top-left-radius プロパティに対応します。

構文

<length-percentage>

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

公式定義

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

形式文法

border-start-start-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-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
# border-radius-properties

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
border-start-start-radius

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報