LINEで現役エンジニアに直接質問してみよう!登録無料

CSS 画像などの要素を円形などの丸角にする「border-radius」の書き方・使い方

この記事では、CSSを使って円を書く方法の1つborder-radiusを紹介します。

border-radiusには「border」という名前がついているので、CSSの線を引くCSSプロパティであるborderを細かく制御するためのプロパティ?と思うかもしれませんが、これは全く違うものです。

borderは「縁、へり、境界」などの意味、radiusは「半径」という意味で、「縁までの半径を制御するためのプロパティ」という意味なのです。

border-radiusをうまく使うと、要素を丸角にしたり、画像を円形にくり抜いたり、ギターのピックのような形に切り抜いたりと言ったことが出来ます。

合わせて読みたい

\ CSSについてわからない人は、下記記事で解説しています!参考にどうぞ /

border-radiusとは?

border-radiusを使うと、要素を丸角にしたり、画像を円形にくり抜いたり、ギターのピックのような形に切り抜いたりできます。buttondivで使われることが多いです。

指定する値は、楕円半径の大きさをpx %を使います。

border-radiusの使い方

丸角にしたい要素にborder-radiusを直接設定することで、あらゆる要素を丸角にすることが出来ます。しかし、当然要素の大きさがない場合、丸角に出来たかどうか確認出来ないため、場合によってwidthheightで要素の大きさを指定します。

border-radiusの使用例とデザイン方法

ここでは、実際にborder-radiusを使って要素を丸角にしてみます。

  1. border-radiusで丸い円を書く
  2. border-radiusで円の中に文字を入れる
  3. border-radiusでリストアイコンを作る
  4. border-radiusで丸いボタンを作る
  5. border-radiusを使って写真を円形にくり抜く
  6. border-radiusを使って不規則な丸を作る

border-radiusで丸い円を書く

border-radiusを使った一番簡単な例です。divと組み合わせて、円を書いてみます。

width heightを使って、要素の幅と高さをもたせた後、背景に色をつけてborder-radiusで丸角にしています。 ここでのポイントはborder-radius: **50%**;のように値に50%を使うことです。

border-radiusは「楕円半径の大きさ」からどのような丸角にするのかを決めます。なので、50%を指定すると、「要素の50%の長さを半径として丸角にしなさい」と言う意味になるので、完全な円になったわけです。

border-radiusで円の中に文字を入れる

border-radiusに直接関連するものではないですが、次章の「リストアイコンの作成」で応用するので、ここで解説します。

display: flexを使うと、中の文字や要素を簡単に上下左右の中央配置が出来ます。

border-radiusでリストアイコンを作る

円の中に文字を入れるのを応用すると、このようにアイコンに応用することも出来ます。

border-radiusで丸いボタンを作る

ここでのポイントは2つあります。

  1. <a>タグのdisplayプロパティをinline-blockにする
  2. border-radiuspxを使う

<a>タグのdisplayプロパティをinline-blockを指定しないと、インライン要素(文章中の一部の文字)として扱われるため、marginを使ったりして周りに空白を取り、デザインをすることが出来ないので、このようなボタンを作成するときは指定するようにしましょう。

次に、border-radiuspxを使うと、程よく角が取れてボタンらしくなります。

border-radiusを使って写真を円形にくり抜く

写真を円形にくり抜くのは簡単です。<img>に対して、border-radiusを適用しましょう。

border-radiusを使って不規則な丸を作る

実は、border-radius/で区切って複数の複数の値を指定することが出来ます。詳しくは、下記のようなページを見てください。

参考 CSSのborder-radiusは実はすごかった!あまり知られていない機能を使用して、かっこいいレイアウトを作る方法coliss

border-radiusのベンダープレフィックスの必要性

border-raduisはCSS3から追加された新しいプロパティです。登場した当時は-moz--webkit- からはじまる「ベンダープレフィックス」をつけてCSSを定義する必要がありましたが、今では主要なブラウザがほぼ全て対応しているので、今ベンダープレフィックスを付ける必要がなくなりました。

border-raduisの各ブラウザごとの対応状況を表しています。

上の画像のように、IEはバージョン9〜、FireboxやChromeは完璧に対応しています。

「border-raduis」の4つの角をそれぞれ設定できるタイプ(例: border-raduis-top-left)の各ブラウザごと対応状況を表しています。

ほぼ全てのブラウザは対応していますね!

手軽に丸角を作れる便利なborder-radiusジェネレータ

参考 FANCY-BORDER-RADIUS9elements.github.io

border-radiusの取り扱いがめんどくさい!」と思った人に、border-radiusの値を簡単に作成してくれるツールがあります。それが、今回紹介する「FANCY-BORDER-RADIUS」です。

このように、色々な形をを表現するborder-radiusの値を自動的に生成してくれます。

生成した値は、下記「COPY」ボタンで、設定値をコピーできます。実際に、この値をコピーしてborder-radiusを使ってみると、このようになります。

この記事を書いた人

自身がプログラミングを独学で勉強し始めて躓いた経験を元に、これから勉強をする人に向けに「イラスト多めでわかりやすい記事」にこだわって情報を発信しています。

現在はフルスタックエンジニアとしてサービス開発などのお仕事をしています。