border-bottom-left-radius
border-bottom-left-radius
は CSS のプロパティで、角の曲率を定義する楕円の半径 (または半長軸と半短軸の半径) を指定することで、要素の左下の角を丸めます。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
丸みは円または楕円にすることができ、値のうちの一つが 0
であれば、丸めは行われずに角は四角くなります。

背景は、画像または単色ですが、丸みがあっても境界で切り取られます。切り取られる正確な位置は、 background-clip
プロパティの値で定義されます。
注: このプロパティの値が
border-bottom-left-radius
プロパティの後の border-radius
一括指定プロパティで設定されなかった場合、このプロパティは一括指定プロパティによって初期値にリセットされます。構文
/* 角を円にする */
/* border-bottom-left-radius: radius */
border-bottom-left-radius: 3px;
/* パーセント値 */
/* ボックスが正方形ならば円、長方形ならば楕円 */
border-bottom-left-radius: 20%;
/* 上と同じ。水平方向 (width) 及び垂直方向 (height) の 20% */
border-bottom-left-radius: 20% 20%;
/* 水平方向 (width) の 20% 及び垂直方向 (height) の 10% */
border-bottom-left-radius: 20% 10%;
/* 角を楕円にする */
/* border-bottom-left-radius: horizontal vertical */
border-bottom-left-radius: 0.5em 1em;
border-bottom-left-radius: inherit;
値1つで指定する場合:
- 値は
<length>
または<percentage>
であり、境界の角に使用する円の半径を示します。
値2つで指定する場合:
- 最初の値は
<length>
または<percentage>
であり、境界の角に使用する楕円の水平の軌道長半径を示します。 - 最初の値は
<length>
または<percentage>
であり、境界の角に使用する楕円の垂直の軌道長半径を示します。
値
<length-percentage>
- 円の半径または楕円の長半径及び短半径を示します。絶対的な長さの場合は、 CSS の
<length>
データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント軸はボックスの高さに対する値です。負の数は無効です。
公式定義
初期値 | 0 |
---|---|
適用対象 | すべての要素。ただし、ユーザーエージェントは border-collapse が collapse である場合にtable および inline-table 要素に適用する必要はない。内部表要素での動作は、今のところ未定義。。 ::first-letter にも適用されます。 |
継承 | なし |
パーセント値 | 境界ボックスの対応する寸法に対する相対値 |
計算値 | 2つの絶対的な length または <percentage> 値 |
アニメーションの種類 | length または パーセント値, calc(); |
形式文法
<length-percentage>{1,2}ここで
<length-percentage> = <length> | <percentage>
例
ライブ例 | コード |
---|---|
|
境界として使用されている円弧
|
|
境界として使用されている楕円の弧
|
|
ボックスは正方形。境界として使用されている円弧
|
|
ボックスは正方形ではない。境界として使用されている楕円の弧
|
|
背景色は境界で切り取られる
|
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Backgrounds and Borders Module Level 3 border-bottom-left-radius の定義 |
勧告候補 | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser