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 2021年9月.
border-start-start-radius は CSS のプロパティで、要素の論理的な境界の半径を定義します。これは要素の writing-mode, direction, text-orientation に応じて、物理的な境界の半径に対応づけられます。これはテキストの方向や書字方向に依存せずにスタイルを構築する際に便利です。
試してみましょう
border-start-start-radius: 80px 80px;
border-start-start-radius: 250px 100px;
direction: rtl;
border-start-start-radius: 50%;
writing-mode: vertical-lr;
border-start-start-radius: 50%;
writing-mode: vertical-rl;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
このボックスは、左上の角が丸くなっています。
</div>
</section>
#example-element {
width: 80%;
height: 80%;
display: flex;
justify-content: center;
flex-direction: column;
background-color: #5b6dcd;
color: white;
padding: 10px;
}
このプロパティは、要素の block-start と inline-start の間の角に影響します。すなわち、書字方向が horizontal-tb で ltr の方向であれば、 border-top-left-radius プロパティに対応します。
構文
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: revert-layer;
border-start-start-radius: unset;
値
<length-percentage>-
円の半径または楕円の長半径及び短半径を示します。絶対的な長さの場合は、 CSS の
<length>データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント値はボックスの高さに対する値です。負の数は無効です。
公式定義
| 初期値 | 0 |
|---|---|
| 適用対象 | すべての要素。ただし、ユーザーエージェントは border-collapse が collapse である場合にtable および inline-table 要素に適用する必要はない。内部表要素での動作は、今のところ未定義。。 ::first-letter にも適用されます。 |
| 継承 | なし |
| パーセント値 | 境界ボックスの対応する寸法に対する相対値 |
| 計算値 | ２つの絶対的な <length> または <percentage> 値 |
| アニメーションの種類 | データ型の値は、実数すなわち浮動小数点数として補間されます。">length または の値は、実数の浮動小数点数として補間されます。">パーセント値, calc(); |
形式文法
border-start-start-radius =
<length-percentage [0,∞]>{1,2}
<length-percentage> =
<length> |
<percentage>
例
縦書きの時の境界の丸め
HTML
html
<div>
<p class="exampleText">角丸の例</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 |
ブラウザーの互換性
Loading…
関連情報
- CSS 論理的プロパティと値
- 対応する物理的プロパティ:
border-top-left-radius writing-mode,direction,text-orientation