【CSS】border-radiusを使って要素の角を丸くする!

CSSにはborder-radiusという要素の角を丸くするプロパティがあります。

border-radiusは、要素の角を丸めて指定するプロパティであり、テキストの枠線や画像の角を丸くして表示することができます。

また、値を1つだけ指定すると4つの角がすべて同じ丸さになりますが複数の体を指定することで1部だけ丸くし、丸さを変えたりすることもできます。

今回は、CSSのopacityを使ってボックス全体を透過させる方法を以下の内容で解説していきます。

⚫︎ 要素の四方の角の丸さを統一して指定する場合
⚫︎ 要素の上下左右の角に異なる丸みを指定する場合
⚫︎ 要素の角を丸くして円型にする場合

⚫︎ 画像を円形に切り抜いて表示する場合
⚫︎ 要素の四隅の角のどこかだけを丸くする場合

⚫︎ border-radiusを使ったオシャレな円形のデザイン

border-radiusとは

border-radiusとは要素の角を丸めて指定するプロパティとなります。

border-radiusの書き方

border-radiusプロパティの書き方は下記となります。

border-radiusの後に数値を指定することで、ボックスの四隅の角の丸みを指定することができます。

角をどれだけ丸くするかは、丸くなった角の部分を4分の1の円として見たときの半径で指定します。
また、正方形のボックスの50%を半径として指定するとボックスは円型になります。

または、下記のように記述することもできます。

border-radiusの後に4つの数値を指定すると、上、右、下、左の順でそれぞれ角の丸みを指定することができます。

要素の角を丸くするサンプルコード

要素の角を丸くするサンプルコードを紹介します。

要素の四方の角の丸さを統一して指定する場合

要素の四方の角の丸さを統一して指定する場合は、border-radiusプロパティの値を一つの数値で指定します。

sample.html

style.css

出力結果

border-radiusプロパティの値を「30px」の1つの数値で指定したことにより、要素の四方の角の丸みが統一されて表示されています。

要素の上下左右の角に異なる丸みを指定する場合

要素の上下左右の角に異なる丸みを指定する場合は、border-radiusプロパティの値を4つの数値で指定します。

sample.html

style.css

出力結果

border-radiusプロパティの値を「30px 20px 40px 10px」の4つの数値で指定したことにより、要素の上下左右の角の丸みが異なって表示されています。

要素の角を丸くして円型にする場合

要素の角を丸くして円型にする場合は、border-radiusプロパティの値を50%で指定します。

sample.html

style.css

出力結果

border-radiusプロパティの値を50%にすることで要素の角を丸くして円型にして表示しています。

画像を円形に切り抜いて表示する場合

画像を円形に切り抜いて表示する場合は、border-radiusプロパティの値を先ほどと同様に50%で指定します。

sample.html

style.css

出力結果

border-radius:を50%にすることによって画像を円形に切り抜いて表示しています。

要素の四隅の角のどこかだけを丸くする場合

要素の四隅の角のどこかだけを丸くする場合は、border-top-left-radiusやborder-top-right-radius、border-bottom-left-radiusやborder-bottom-right-radiusを使用します。

border-top-left-radiusで上の左の角を、border-top-right-radiusで上の右の角を、border-bottom-left-radiusで下の左の角をborder-bottom-right-radiusを使うと下の右の角の丸みを調整することができます。

sample.html

style.css

出力結果

border-top-left-radiusによって左上の角を丸くし、border-bottom-left-radiusによって左下の角を丸くして表示しています。

border-radiusを使ったオシャレな円形のデザイン

border-radiusを使ってオシャレな円形のデザインを紹介します。

sample.html

style.css

出力結果

円の丸みを統一して表示するのも良いかもしれませんが、円の丸みをずらすことでも少しオシャレなデザインになります。

今回のポイント

border-radiusで要素の角を丸くする

⚫︎ CSSにはborder-radiusという要素の角を丸くするプロパティがある

⚫︎ border-radiusとは要素の角を丸めて指定するプロパティである

⚫︎ 要素の四方の角の丸さを統一して指定する場合は、border-radiusプロパティの値を一つの数値で指定する

⚫︎ 要素の上下左右の角に異なる丸みを指定する場合は、border-radiusプロパティの値を4つの数値で指定する

⚫︎ 要素の角を丸くして円型にする場合は、border-radiusプロパティの値を50%で指定する

⚫︎ 画像を円形に切り抜いて表示する場合は、border-radiusプロパティの値を先ほどと同様に50%で指定する

⚫︎ 要素の四隅の角のどこかだけを丸くする場合はborder-top-left-radiuborder-top-right-radiusborder-bottom-left-radiusborder-bottom-right-radiusを使用する

関連記事

CSSのborderブロパティについて詳しく知りたい場合はこちらをご参考ください。

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報

フリーランスエンジニアの案件探し