【CSS】入門者向けにborder-radiusプロパティを徹底解説!!

こんにちは。

長方形のボックスや見出しのボーダーなどで柔らかい印象を表現したい時に角を取りたい時ってありますよね。

そこでネットサーフィンをしているとたまにborder-radiusというプロパティを目にすることはありませんか?

border-radiusって結局何の値なの?

という人も少なからずいるはず…

何となく「とりあえず5pxぐらいでいっか!」というふうに設定していませんか?このborder-radiusの指定できる値の原理を知っておくとデザイン力の向上にもつながります。

そこで今回はborder-radiusプロパティの

・基本的な使い方
・border-radiusの応用例

を紹介します!

border-radiusとは

border-radiusの読み方

border-radiusは「ボーダーレイディアス」、または「ボーダーレイジアス」と読みます。筆者の周りでは「レイディアス」派の人が多い印象にありますね。

radiusは日本語で「半径」を意味しますが、プロパティの意味としても半径に関連した値を指定するので覚えやすいですね!

border-radiusはボックスの角を丸くするプロパティ

border-radiusプロパティの用途は

ボックスの角を丸くするプロパティ

です。

デザインの用途として、見るひとに柔らかい印象を与えたい時などに使用されます。

ちょうどこの見出しの「ボックスの角を丸くするプロパティ」を囲っているグレーの外枠みたいな感じですね!

border-radiusで利用できる値

border-radiusでは以下の値を使うことができます。

説明
単位つき数値 pxやptなどの単位をつけた数値。
パーセンテージ ボックスの横幅や縦幅に対しての割合で指定することも可能。

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ 対応状況
Chrome 完全対応
Edge 完全対応
Firefox  完全対応
Internet Explorer  完全対応
Opera  完全対応
Safari  完全対応
スマートフォン用ブラウザ 対応状況
Android webview  完全対応
Android版Chrome  完全対応
Android版Firefox  完全対応
Android 版 Opera  完全対応
iOS版Safari  完全対応
Samsung Internet  完全対応

border-radiusの基本的な使い方

ここではborder-radiusプロパティの値計算の原理から具体的な使い方を解説します。

border-radiusの値の原理

border-radiusプロパティがボックスの角を丸くする、と言っても何を基準に数値を入れたら良いのか、知っている人は実は少ないという現状があります。

ネットサーフィンをしていても「とりあえず5pxぐらい」のように感覚で値を指定している人が目立ちます。

そこで一旦、border-radiusの値の計算の原理を解説します。

上の図はborder-radiusに指定する値の原理を図示したものです。

border-radiusの値には、ボックスの角を1/4の円にみたてた時の半径を指定します。

なので「 border-radius: 5px; 」と指定した場合はこの1/4の円の半径が5pxという意味になります。

border-radiusの実装例

それではさっそくborder-radiusの実装例をサンプルコードと一緒に見ていきましょう。

上の見出しはborder-radiusを適用していない普通のボックスです。比較してみると、border-radiusを指定している下のボックスの方は四隅が少し丸くなっていますよね。

border-radiusを指定するとこのように角を丸くすることができます。

ボックスの角を個別に丸くするには?

border-radiusを使用してボックスの角を個別に丸くすることもできます。

上下左右それぞれ別々に指定

このように、border-radiusに4つの値を指定することによって角を個別に丸くすることができます。

左上と右下、右上と左下をそれぞれ別々に指定

個別に指定するプロパティを使用する

実はborder-radiusプロパティと類似した「border-上下-左右-radius」プロパティというCSSプロパティが存在します。

この上下にはtop, bottomのいずれか、左右にはleft, rightのいずれかが入ります。

角を個別に丸くするにはこのプロパティを使用する方法もあります。

border-radiusの応用例

ここではborder-radiusを応用した例を紹介します。

border-radiusプロパティを使用することによって、円をコーディングで表現することができます。

円を作成するには同値のwidthとheightのボックスに対して、border-radiusの値を50%と指定することによって実装できます。

クローバー

こちらは使用頻度はほとんどありませんが、こんなのも作れるよ〜程度に思っておいてください。(笑)

このように、border-radiusを応用するとクローバーのような変わった図形も表現することができます。

まとめ

いかがでしたか?

今回は border-radiusプロパティの基本的な使い方と応用的な使い方を紹介していきました。

border-radiusプロパティは使い方によって様々なデザインを実現することができるので、しっかりと使い方をマスターしておきましょう!

参考文献:https://developer.mozilla.org/ja/docs/Web/CSS/border-radius

プログラミング学習に迷ったら相談してみよう!
無料でカウンセリングを受けてみる
※売り込みは一切致しません プログラミングスクール無料カウンセリング