【CSS】border-bottom-left-radius - 左下角の曲線
CSSのborder-bottom-left-radiusプロパティをご紹介します。
border-bottom-left-radius
border-bottom-left-radiusは要素の左下角の曲線を示すプロパティです。
基本構文
border-bottom-left-radius: 水平の軌道長半径 垂直の軌道長半径;
値が1つのみの場合は水平と垂直の軌道長半径に同じ値を適用します。
サンプル
サンプル1
<style>
div {
width: 100px;
height: 100px;
border: 1px solid black;
border-bottom-left-radius: 40px;
}
</style>
<div></div>
サンプル2
<style>
div {
width: 100px;
height: 100px;
border: 1px solid black;
border-bottom-left-radius: 20px 40px;
}
</style>
<div></div>