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 |
計算値 | 2つの絶対的な 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
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
関連情報
- 対応する物理プロパティ:
border-top-left-radius
writing-mode
,direction
,text-orientation