元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事とブログのカスタマイズについて書いています。

 menu

CSS入門(border-radiusプロパティの使い方)

border-radiusプロパティの基本的な使い方について書きます。border-radiusプロパティは、要素の角を丸くするプロパティです。具体的な書き方は、サンプルコードを確認してください。

記述の仕方

/* 記述例 */
/* 4つの角をまとめて指定する場合 */
セレクタ名{ border-radius: 楕円の半径; }

/* 4つの角をそれぞれ指定する場合 */
セレクタ名{ border-radius: 左上 右上 右下 左下(楕円の水平方向の半径) / 左上 右上 右下 左下(楕円の垂直方向の半径); }

/* 4つの角を個別に指定する場合 */
セレクタ名{ border-top-left-radius: 楕円の半径; } /* 左上 */
セレクタ名{ border-top-right-radius: 楕円の半径; } /* 右上 */
セレクタ名{ border-bottom-right-radius: 幅と高さに対する楕円の半径の割合(%); } /* 右下 */
セレクタ名{ border-bottom-left-radius: 楕円の水平方向の半径 楕円の垂直方向の半径; } /* 左下 */

上記が基本的な記述です。border-radiusでは、4つの角をまとめて指定する書き方とそれぞれ指定する書き方があります。また、左上・右上・右下・左下の角丸を個別に記述する場合は、border-top-left-radiusborder-top-right-radiusborder-bottom-right-radiusborder-bottom-left-radiusで指定します。border-radiusが取る値を文字で説明すると難しく感じるかもしれませんが、どれも「楕円の半径」を指定します。

border-radiusプロパティの基本情報

楕円の半径の値

  • 数値で指定(px、em、%など)

サンプルコード

4つの角をまとめて指定する場合

四角形の4つの角をまとめて丸くする例です。

<div id="sample1"></div>
#sample1{
  width:100px;
  height:100px;
  background:cyan;
  border-radius:10px;
  /* border-radius:30px; */
  /* border-radius:50px; */
}

表示例

border-radiusの値を左から10px、30px、50pxで指定しています。黄色の図形を見れば分かると思いますが、角丸で円を表現することができます。表示例では、幅、高さがそれぞれ100pxの正方形に対して、border-radiusに辺の半分の長さ(50px)を指定しています。

4つの角をそれぞれ指定する場合

4つの角をそれぞれ違う値に指定した例です。

<div id="sample2"></div>
#sample2{
  width:100px;
  height:100px;
  background:cyan;
  border-radius:50px 40px 30px 20px / 50px 40px 30px 20px;
  /* border-radius:50% 40% 30% 20% / 50% 40% 30% 20%; 上記と同じ値を%で指定 */
}

表示例

4つの角を個別に指定する場合

左上の角だけを角丸にする例です。

<div id="sample3"></div>

#sample3{
  width:100px;
  height:100px;
  background:magenta;
  border-top-left-radius: 50px;
  / border-top-left-radius: 50%; 上記の書き換え /
  / border-top-left-radius: 50px 50px; 上記の書き換え /
}

表示例

まとめ

border-radiusプロパティの基本的な使い方について書きました。記述の仕方が色々ありますが、よく使うのはセレクタ名{ border-radius: 楕円の半径; }だと思います。border-radiusプロパティの使用例としては、「ボタンの装飾」や「見出しの装飾」などです。