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

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

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

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

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

全ての角丸を一括指定

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

radius2

HTML

CSS

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

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

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

CSS

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

radius4

HTML

CSS

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

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

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

CSS

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

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

radius5

HTML

CSS

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

border-radiusの使用例

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

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

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

radius-ex1

HTML

CSS

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

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

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

radius1

HTML

CSS

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

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

radius-ex3

HTML

CSS

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

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

border-radiusの対応ブラウザ

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

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

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

まとめ

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

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

最短でプログラミングを習得したい方へ

元々ITリテラシーのある方やプログラムの学び方がわかっている方は独学で習得することも可能でしょう。

ただし、実際の学習期間中はつまづいている時間がほとんどです。

「もう挫折したくない」
「本業と両立しながら、好きな時間で自分のペースで勉強を続けていきたい。」
「自分だけのカリキュラムで効率的に勉強したい」

そんな方はお気軽に侍エンジニア塾までご相談ください。

弊社では、

  • プログラミング基礎学習
  • オリジナルアプリ開発
  • 仕事獲得

までをひと通り学習できます。

まずは無料体験レッスンで、弊社のコンサルタントと一緒にあなた専用の学習方法やカリキュラムを考えてみませんか?

挫折しない学び方や、通常1000時間以上かかる学習時間を1/3にする方法などより具体的なアドバイスもさせていただいています。

詳しくは下の画像をクリックして弊社サービス内容をご確認ください。

cta1

LINEで送る
Pocket

書いた人

ナナミ

ナナミ

1991年生まれ。
文系大学卒業後、フリーターを経てフロントエンジニアになる。
HTML、CSS、 jQueryなどのコーディングやCMS設計に従事。
文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。
体は日本酒でできている。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説