【CSS Modules】border-radius省略形プロパティの使い方
border-radius省略形プロパティの使い方について、初心者にもわかりやすく解説します。
基本的な使い方
border-radiusプロパティは、HTML要素の四隅を丸めるための半径を保持するプロパティです。これはCSSにおいて、「shorthand-property（短縮プロパティ）」と呼ばれる種類のプロパティであり、要素の各角の丸みを個別に設定するborder-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radiusといったプロパティを、一つにまとめて指定することができます。
このプロパティに値を指定する際は、指定する値の数によって適用される角が変わります。もし一つの値を指定した場合、その値がすべての角（左上、右上、右下、左下）の丸みの半径に適用されます。二つの値を指定した場合、最初の値は左上と右下の角に、二番目の値は右上と左下の角に適用されます。三つの値を指定した場合、最初の値は左上の角に、二番目の値は右上と左下の角に、三番目の値は右下の角に適用されます。そして、四つの値を指定した場合、それらの値は時計回りに、左上、右上、右下、左下の角の半径にそれぞれ適用されます。
各半径の値は、ピクセル（px）やemなどの長さ単位、または要素の幅に対するパーセンテージ（%）で指定できます。また、スラッシュ（/）を用いて水平方向の半径と垂直方向の半径を分けて指定することで、角を楕円形にすることも可能です。border-radiusプロパティは、ウェブサイトやアプリケーションのユーザーインターフェースにおいて、視覚的な柔軟性とデザイン性を高めるために非常に頻繁に使用される重要なプロパティです。
構文(syntax)
1border-radius: 10px;
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません