ブログ

  1. トップ
  2. ブログ
  3. CSS3のborder-radiusを使って要素の輪郭を角丸にする方法

Web制作

CSS3のborder-radiusを使って要素の輪郭を角丸にする方法

CSS3のプロパティについて解説する連載です。今回は角丸を指定するborder-radiusの使い方について解説します。

border-radiusの指定方法

border-radiusを使うと、CSS3だけで要素の輪郭を角丸にできます。border-radiusは下のように指定します。

border-radius: 左上 右上 右下 左下;

要素の左上から順番に、時計回りに値(pxやem、%)を指定していきます。border-radiusで指定した値が半径となり、角丸が表現されます。なお、角丸はボーダーの外側に適用されるので注意しましょう。

なお、水平方向と垂直方向で値を変えたい場合は、半角スラッシュを使って下のように指定します。

border-radius: 左上 右上 右下 左下 / 左上 右上 右下 左下(水平方向 / 垂直方向)

水平方向と垂直方向で値を変えると、角丸を楕円で表現することも可能です。

border-radiusの具体例

それではborder-radiusの具体例について見ていきましょう。

全て同じ値を指定する

border-radius: 25px;
全て同じ値を指定する

全て同じ値を指定した場合、上のように均一な角丸で表現することができます。

角丸の値を個別に設定する

border-radius: 10px 0 10px 25px;
角丸の値を個別に設定する

四隅の角丸を異なる値で指定する場合です。左上から順番に、時計回りに指定すればOKです。

水平方向と垂直方向を別々に指定する

border-radius: 50px / 20px;
水平方向と垂直方向を別々に指定する

水平方向と垂直方向を別々に指定すると、角丸が楕円で表現できます。半角のスラッシュを使って、前から水平方向、垂直方向の順に指定していきます。

border-radius: 50px 0 50px 0 / 10px 0 10px 0;
水平方向と垂直方向を別々に指定する

この場合でも、四隅を別々に指定することができます。先ほどと同じように、左上から時計回りに指定していけばOKです。

あとがき

border-radiusの指定方法について解説しました。従来は画像を使っていた場面も多いかと思いますが、border-radiusを使うとCSS3だけで角丸が表現できます。ぜひ活用していってください。