【CSS初心者向け!】角を丸くする方法をコードを交えて詳しく解説

ボックスの角を丸くする理由・必要性は？

サンプルで作成したこちらのWebサイトを見てください。なんだか硬い印象を受けませんか？ 一部を角を丸くする効果を使って修正してみます。すると・・・ さきほどより、優しくとっつきやすい印象に変わりましたね。

このように、boxの角を丸くする効果を使うことで、四角いboxが連続しているWebサイトよりも、全体に優しい印象や柔らかな印象を与えることができます。この角を丸くするために使うプロパティが、border-radiusです。

CSSで角を丸くする border-radiusとは？

border-radiusとは、角の丸みの半径を数値で指定するプロパティです。この数値が大きいほどboxが丸に近づき、数値が小さいと四角に近づきます。

構文

指定可能な値

border-radiusの指定は、下図の1,2,3,4それぞれに行うことができます。

1. 一括指定
   例）border-radius 10px;
   数値を1つだけ記載すると、1,2,3,4全ての角を同じ丸みにします。
2. 個別指定
   例) border-radius 10px 25px 10px 25px;
   例) border-radius 10px 25px;
   例) border-radius 10px 25px 10px;
   4つ全て別、「1と3、2と4」の2つ、「1、2と4、3」の３つの方法で指定できます。
3. 縦と横の半径で指定
   例）border-radius 10px/20px;
   縦と横の半径を指定して角を丸めます。楕円形のように角を丸くすることができます。

実践！角を丸くする方法

例１ 一括で指定

サンプルコード

/* CSSファイルに記載します */
.box1 {
    border: solid 2px black;
    padding: 15px;
    width: 60%;
    border-radius: 10px; /* 角を丸くする */
}

<!-- HTMLファイルに記載します -->
<div class="box1">
一括で半径10pxを指定して丸めています</br>
四隅に丸みのあるボックスです。
</div>

結果

例２　個別に指定

サンプルコード

/* CSSファイルに記載します */
.box2_1 {
    border: solid 2px black;
    padding: 15px;
    width: 60%;
    border-radius: 10px 20px 30px 40px; /* 角を丸くする */
}
.box2_2 {
    border: solid 2px black;
    padding: 15px;
    width: 60%;
    border-radius: 10px 20px 30px; /* 角を丸くする */
}

<!-- HTMLファイルに記載します -->
<div class="box2_1">
左上から時計回りに10px,20px,30px,40pxを</br>
指定して丸めています。
</div>
</br>
<div class="box2_2">
数値を３つ指定しました。
</div>

結果

例３　縦と横の半径で指定

サンプルコード

/* CSSファイルに記載します */
.box3_1 {
    border: solid 2px black;
    padding: 15px;
    width: 60%;
    border-radius: 10px/20px ; /* 角を丸くする */
}
.box3_2 {
    border: solid 2px black;
    padding: 15px;
    width: 60%;
    border-radius: 10px 20px /10px 25px 30px 20px ; /* 角を丸くする */
}

<!-- HTMLファイルに記載します -->
<div class="box3_1">
縦の半径を10px,横の半径を20pxに指定しました。
</div>
</br>
<div class="box3_2">
応用として、縦横の半径を個別に指定することもできます。
</div>

結果

Tips (ステップアップの小ワザ)

画像にも使えます

border-radiusプロパティは、border(罫線)という名称ですが、線ではなくボックス自体を丸くしています。このため、線のないボックスを丸めることや、imgタグに設定し、サンプルのように画像の角を丸くすることもできます。

/* CSSファイルに記載します */
.box4 {
    border-radius: 40px/60px ; 
}

<!-- HTMLファイルに記載します -->

<img class="box4" src="cd.jpg">

結果

IE8以前には対応していません

border-radiusはCSS3で対応されたプロパティのため、IE8などの旧ブラウザでは対応していないものがあります。

まとめ

border-radiusが登場する以前は、角の丸いボックスを表現するためにわざわざ画像を使ったりしていました。それがわずかCSSの一行で実現できるようになったので、作成する側からはとても楽になり嬉しいことですね。使えると便利なborder-radiusで、Webサイトに遊び心を加えてくださいね。