MENU
  1. ホーム
  2. その他
  3. CSSのborder-radiusで要素を角丸にする方法

CSSのborder-radiusで要素を角丸にする方法

その他
侍エンジニア編集部

こんにちは！ライターのナナミです。

CSSでボタンを作りたいとき、角を丸くした方がボタンっぽくなりますよね。

radius1

今回はこんな感じのボタンを作れる、border-radiusについてまとめました！

この記事は下記のような流れで説明していきます。

【基礎】border-radiusとは何か
【基礎】border-radiusの使い方
【発展】border-radiusの使用例
【発展】対応ブラウザ

角を丸くする方法がわかれば、さっきのようなボタンが簡単に作れちゃいます。

もちろんボタン以外にも使い所満載！
どんどん活用できるようになっちゃいましょう。

目次

角丸が作れるborder-radiusとは？

border-radiusは、要素の角を丸く滑らかにすることができるプロパティです。

radius2
指定方法は数値です。
その数値を半径とした円に合わせて、角の丸さが決まります。

例えばborder-radiusを10pxで指定すると…

radius3

半径10pxの円形に合わせた角丸が作れるわけです。

border-radiusの使い方

border-radiusの使い方はとっても簡単！
基本は下記のように書くだけです。

CSS

セレクタ{
    border-radius:数値;
}

数値にはpxか％を指定することができます。

pxだと指定した大きさそのまま、％だと指定した要素の比率に合わせた角丸を指定してくれます。

全ての角をまとめて指定したり、別々に指定することもできます。

では、それぞれの書き方を見ていきましょう。

全ての角丸を一括指定

下記のように数値を一つだけ入れると、4つの角を一括で指定することができます。

radius2

HTML

<div class="radius_test">
</div>

CSS

.radius_test {
    width: 300px;               /* 幅指定 */
    height: 200px;              /* 高さ指定 */
    border: solid 2px #000;     /* 枠線指定 */
    background-color: #eee;     /* 背景色指定 */
    border-radius: 10px;        /* 角丸指定 */
}

まとめて指定できるので楽チンですね。

角ごとに角丸を別々に指定

角ごとに別々に指定したい場合は、下記のように半角スペースを空けて指定します。

CSS

セレクタ{
border-radius:左上の角の数値 右上の角の数値 右下の角の数値 左下の角の数値 ;
}

実際に使ってみるとこんな感じです。

radius4

HTML

<div class="radius_test">
</div>

CSS

.radius_test {
    width: 300px;                           /* 幅指定 */
    height: 200px;                          /* 高さ指定 */
    border: solid 2px #000;                 /* 枠線指定 */
    background-color: #eee;                 /* 背景色指定 */
    border-radius: 10px 20px 40px 100px;    /* 角丸指定 */
}

ちょっと変わった角丸指定

前述の通り、角丸の指定は「どんな形の丸型合わせて丸くするか」を数値で指定しています。
各値が単体なのは、高さも幅も同じな真円を指定しているからです。

実は各値は、高さと幅を別々で指定することもできます。
つまり、楕円型に沿った角丸も作ることができるのです。

CSS

セレクタ{
border-radius:左上の角の幅 右上の角の幅 右下の角の幅 左下の角の幅 / 左上の角の高さ 右上の角の高さ 右下の角の高さ 左下の角の高さ ;
}

幅の指定をまとめて記述したあと、「/（スラッシュ）」で区切ってから高さの記述をまとめて記述します。

これを使えば、こんな形を作ることもできちゃいます。

radius5

HTML

<div class="radius_test">
</div>

CSS

.radius_test {
    width: 300px;               /* 幅指定 */
    height: 200px;              /* 高さ指定 */
    border: solid 2px #000;     /* 枠線指定 */
    background-color: #eee;     /* 背景色指定 */
    border-radius: 80px 130px 210px 30px/110px 30px 110px 150px;    /* 角丸指定 */
}

使いどころは難しいかもしれませんが、面白い形にできますね！

border-radiusの使用例

指定の仕方で印象が変わるborder-radius、いろんな形を作ることができますね。

WEBサイトに組み込んだらどんな感じになるのか、いくつか例を出してみました。
参考にしてみてください。

要素を角丸にしてポップなレイアウト

radius-ex1

HTML

<div class="radius_test">
    ポップな印象に
</div>
<div class="radius_test">
    なりますね！
</div>
<div class="radius_test">
    色をバラバラにしても
</div>
<div class="radius_test">
    かわいいかも？
</div>
<div class="radius_test">
    こんな感じで
</div>
<div class="radius_test">
    いろいろできます！
</div>

CSS

.radius_test {
    width: 32.3333%;            /* 幅指定 */
    height: 200px;              /* 高さ指定 */
    border-radius: 10px;        /* 角丸指定 */
    display:  inline-block;     /* インラインブロックする */
    box-sizing:  border-box;    /* 崩れ防止 */
    margin-bottom: 5px;         /* 要素の空き具合指定 */
    padding:  20px;             /* 余白指定 */
    font-family: "ヒラギノ丸ゴ Pro W4","Hiragino Maru Gothic Pro";    /* フォントの種類を指定 */
    text-align:  center;        /* 中央揃え */
    color:  #fff;               /* 文字色指定 */
    font-size: 18px;            /* 文字サイズ指定 */
}
.radius_test:nth-child(1) {
    background-color:#de9610;   /* 背景色指定 */
}
.radius_test:nth-child(2) {
    background-color:#c93a40;   /* 背景色指定 */
}
.radius_test:nth-child(3) {
    background-color:#d06d8c;   /* 背景色指定 */
}
.radius_test:nth-child(4) {
    background-color:#65ace4;   /* 背景色指定 */
}
.radius_test:nth-child(5) {
   background-color:#a0c238;    /* 背景色指定 */
}
.radius_test:nth-child(6) {
    background-color:#0074bf;/* 背景色指定 */
}

角丸の要素が並んでいると、ちょっと柔らかい雰囲気になりますね。

今回はポップなカラーリングにしてみましたが、色を変えれば優しい雰囲気も作れそうです。

使い勝手抜群な角丸四角ボタン

radius1

HTML

<a class="radius_test" href="URL">
    click!
</a>

CSS

.radius_test {
    text-decoration:  none;             /* デフォルトCSS打ち消し */
    color: #fff;                        /* 文字色指定 */
    background-color: #00BCD4;          /* 背景色指定 */
    width: 300px;                       /* 幅指定 */
    display: block;                     /* ブロック要素にする */
    text-align:  center;                /* 中央揃え */
    padding: 15px;                      /* 余白指定 */
    border-radius:  5px;                /* 角丸指定 */
    font-size: 24px;                    /* 文字サイズ指定 */
    box-shadow: 0 2px 10px 0 #9E9E9E;   /* 影指定 */
}

角丸の活用法と言えばこれ、ボタンですね！
影もつければかなりいい感じのボタンが作れちゃいます。

アイコンと相性バッチリな丸ボタン

radius-ex3

HTML

<a class="radius_test" href="URL">
    <img class="test_icon" src="test-icon.png" alt="">
</a>

CSS

.radius_test {
    border-radius: 50%;                 /* 角丸指定 */
    display:  inline-block;             /* インラインブロックする */
    padding: 27px 0px;                  /* 余白指定 */
    background-color: #00BCD4;          /* 背景色指定 */
    width: 141px;                       /* 幅指定 */
    text-align:  center;                /* 中央揃え */
    box-shadow: 0 2px 10px 0 #9E9E9E;   /* 影指定 */
}

.test_icon {
    opacity: 0.5;                       /* 透過度指定 */
}

正方形に50％の角丸をつけると、いい感じにまん丸になってくれます。

四角いボタンもいいですが、丸いボタンもなかなか使い勝手がいいですよね。
特にアイコンとの相性が抜群です。

border-radiusの対応ブラウザ

border-radiusは基本的にどのブラウザでも使うことができます。

ただし例外として、IE8以前の超オールドブラウザは非対応となっています。

どうしてもIE8以前も対応しなければならない…というわけでなければ、気にせず使っちゃいましょう！

まとめ

いかがでしたか？
ちょっと角丸を入れるだけで、ボタンはボタンらしく、レイアウトの雰囲気もガラッと変わりますね。

角丸の活用方法はまだまだたくさんあります。
ぜひ色々試しながら使ってみてください！

その他

この記事を書いた人

侍エンジニア編集部のアバター 侍エンジニア編集部

【プロフィール】
DX認定取得事業者に選定されている株式会社SAMURAIのマーケティング・コミュニケーション部が運営。「質の高いIT教育を、すべての人に」をミッションに、IT・プログラミングを学び始めた初学者の方に向け記事を執筆。
累計指導者数4万5,000名以上のプログラミングスクール「侍エンジニア」、累計登録者数1万8,000人以上のオンライン学習サービス「侍テラコヤ」で扱う教材開発のノウハウ、2013年の創業から運営で得た知見に基づき、記事の執筆だけでなく編集・監修も担当しています。
【専門分野】
IT/Web開発/AI・ロボット開発/インフラ開発/ゲーム開発/AI/Webデザイン

この著者の記事一覧へ
目次