【CSS】border-radiusの使い方

「border-radius」は、CSSで要素の枠線の角を丸くするためのプロパティです。数値を指定することで、枠線の角の丸みの度合いを調整することができます。

角を丸くするには、「border-radius」プロパティに値を指定します。値はピクセル単位で指定します。指定した値が角丸の半径になります。

角丸の半径を指定する際に、「border-top-left-radius」「border-top-right-radius」「border-bottom-left-radius」「border-bottom-right-radius」など、角ごとに個別に指定することもできます。

例えば、要素に対して「border-radius: 10px」とすることで、すべての角が10pxの角丸になります。

また、「border-top-left-radius: 10px 20px;」「border-top-right-radius: 20px 30px;」「border-bottom-left-radius: 30px 40px;」「border-bottom-right-radius: 40px 50px;」など、角ごとに水平方向と垂直方向の角丸を個別に指定することもできます。

「border-radius」プロパティを使用することで、要素の枠線の角を丸くすることができ、要素をよりスマートに見せることができます。