This page was translated from English by the community. Learn more and join the MDN Web Docs community.

border-bottom-left-radius

border-bottom-left-radius は CSS のプロパティで、角の曲率を定義する楕円の半径 (または半長軸と半短軸の半径) を指定することで、要素の左下の角を丸めます。

丸みは円または楕円にすることができ、値のうちの一つが 0 であれば、丸めは行われずに角は四角くなります。

border-bottom-left-radius.png

背景は、画像または単色ですが、丸みがあっても境界で切り取られます。切り取られる正確な位置は、 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;

値１つで指定する場合:

  • 値は <length> または <percentage> であり、境界の角に使用する円の半径を示します。

値２つで指定する場合:

  • 最初の値は <length> または <percentage> であり、境界の角に使用する楕円の水平の軌道長半径を示します。
  • 最初の値は <length> または <percentage> であり、境界の角に使用する楕円の垂直の軌道長半径を示します。

値

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

公式定義

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

形式文法

<length-percentage>{1,2}
ここで
<length-percentage> = <length> | <percentage>

例

ライブ例 コード
境界として使用されている円弧 
div {
  border-bottom-left-radius: 40px 40px;
}
境界として使用されている楕円の弧 
div {
  border-bottom-left-radius: 40px 20px;
}
ボックスは正方形。境界として使用されている円弧 
div {
  border-bottom-left-radius: 40%;
}
ボックスは正方形ではない。境界として使用されている楕円の弧 
div {
  border-bottom-left-radius: 40%;
}
背景色は境界で切り取られる 
div {
  border-bottom-left-radius:40%;
  border-style: black 3px double;
  background-color: rgb(250,20,70);
  background-clip: content-box;
}

仕様書

仕様書 状態 備考
CSS Backgrounds and Borders Module Level 3
border-bottom-left-radius の定義		 勧告候補 初回定義

ブラウザーの互換性

BCD tables only load in the browser

関連情報