【CSS】border-bottom-radiusの使い方

「border-bottom-radius」は、要素の下辺(底辺)に対して、角丸を設定するためのCSSプロパティです。

使用方法は「border-radius」とほぼ同じで、「border-bottom-radius」に「px」や「%」などの単位で角丸の半径を指定します。

例えば、下辺に50pxの角丸を設定するには次のように指定します。

.example{
    border-bottom-radius: 50px;
}

「border-bottom-left-radius」や「border-bottom-right-radius」など、個別に左下や右下の角丸を指定することもできます。

.example{
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 50px;
}

「border-bottom-radius」を使用することで、要素の下辺に角丸を設定することができます。