border-bottom-left-radius
は CSS のプロパティで、角の曲率を定義する楕円の半径 (または半長軸と半短軸の半径) を指定することで、要素の左下の角を丸めます。
このデモのソースファイルは 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 |
---|---|
適用対象 | 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>
例
ライブ例 | コード |
---|---|
|
境界として使用されている円弧
|
|
境界として使用されている楕円の弧
|
|
ボックスは正方形。境界として使用されている円弧
|
|
ボックスは正方形ではない。境界として使用されている楕円の弧
|
|
背景色は境界で切り取られる
|
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Backgrounds and Borders Module Level 3 border-bottom-left-radius の定義 |
勧告候補 | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。