CSSを使って角丸のデザインを実装｜コード付きですぐに使える

（最終更新日：2023年11月）

✔以下のような方に向けて書かれています

「CSSで角丸デザインを作りたいが、どのようにしたらいいのかわからない」
「CSSの角丸デザインのコードの書き方について学びたい」
「角丸デザインの実用的な例を知りたい」

✔ 当記事を通じて伝えたいこと

• CSSにおける角丸デザインの基本的な概念
• 角丸デザインを作成するためのCSSのコードの書き方とその応用
• 実際に活用できるCSSの角丸デザインの事例

当記事では、CSSを用いた角丸デザインの基本から応用的なオプションの活用方法まで、具体的な例を交えてわかりやすく解説しています。

ぜひ最後までお読みいただき、角丸デザインのマスターになりましょう。

CSS 角丸の基本: border-radius

こちらでは、CSSにおける角丸を作成する基本的なプロパティ、border-radiusについて説明します。

以下の二つの観点から詳細を見ていきましょう。

• border-radiusとは？
• border-radiusの使い方

border-radiusとは？

border-radiusは、CSSのプロパティで、HTML要素の角を丸くするために使用するもの。

角の丸さは、指定した半径の円の円弧を用いて形成されます。

このプロパティを用いることで、ウェブサイトのデザインの可能性が格段に広がるでしょう。

border-radiusの使い方

border-radiusの使い方は、それ自体が非常にシンプルです。

CSSのプロパティとして、角を丸くする半径を単位付きの数値で指定します。

例えば、次のようなCSSコードは、角を半径20pxで丸くします。

div {
  border-radius: 20px;
}

この基本的な使い方をマスターしたら、次に進み、より高度な技術を学びましょう。

正円の円弧を使った角丸の作成

次に、border-radiusを用いて正円の円弧を使った角丸の作成について見ていきましょう。

ここでは以下の3つの主要なトピックを取り上げます。

• 全ての角丸を一括指定
• 角ごとに角丸を別々に指定
• 四つ葉のクローバーの形に並べる方法

全ての角丸を一括指定

全ての角丸を同じ半径で一括指定するには、border-radiusにひとつの値を与えます。

次のCSSコードは全ての角を50pxの半径で丸くします。

div {
  border-radius: 50px;
}

この指定方法は、角丸の半径が全て同じ場合に適しています。

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

各角を別々の半径で丸くするには、border-radiusに最大4つの値をスペース区切りで与えます。

これらの値は時計回りに適用され、始点は上部左の角です。

以下のCSSコードは上部左の角を50px、上部右を30px、下部右を20px、下部左を10pxで丸くします。

div {
  border-radius: 50px 30px 20px 10px;
}

このように、角ごとに異なる半径を設定することで、より個別化された形状を作成することが可能です。

四つ葉のクローバーの形に並べる方法

さらに進んだテクニックとして、四つ葉のクローバーのような形を作る方法もあります。

これはborder-radiusにパーセンテージを使用することで可能です。

以下のCSSコードは、各角を50%で丸くし、四つ葉のクローバーの形状を作ります。

div {
  border-radius: 50%;
}

このようにborder-radiusを使用すると、基本的な形状から複雑な形状まで、さまざまな角丸の作成が可能です。

楕円の円弧を使った角丸の作成

さらに進んで、楕円の円弧を使った角丸の作成について学びます。

ここでは、以下の3つのトピックに焦点を当てましょう。

• ふにゃんと曲がった歪みライン
• 歪んだ円＋ブレンドモード
• 歪んだ円＋ブレンドモード＋アニメーション

ふにゃんと曲がった歪みライン

まず、ふにゃんと曲がった歪みラインを作る方法を紹介します。

これは、border-radiusに2つの値を指定することで達成可能。

以下のCSSコードでは、水平方向の半径を100px、垂直方向の半径を50pxに設定し、角丸の形状が歪んだ形になります。

div {
  border-radius: 100px / 50px;
}

この形状は、ウェブページに独特のスタイルを加えるのに便利です。

歪んだ円＋ブレンドモード

次に、歪んだ円をブレンドモードと組み合わせる方法を見てみましょう。

これは、楕円形状とCSSのmix-blend-modeプロパティを組み合わせることで達成できます。

mix-blend-modeは元の色と背景色をどのように混ぜ合わせるかを指定するもので、この例ではmultiplyを使っています。

div {
  border-radius: 100px / 50px;
  mix-blend-mode: multiply;
}

これにより、重なり合った部分が暗くなり、歪んだ円の形状が更に強調されます。

歪んだ円＋ブレンドモード＋アニメーション

さらに、歪んだ円とブレンドモードにアニメーションを追加することで、動的な効果を作り出すこともできます。

以下のCSSコードでは、アニメーションで歪んだ円が膨張・収縮するように設定する例です。

@keyframes expand {
  0%   { border-radius: 100px / 50px; }
  50%  { border-radius: 200px / 100px; }
  100% { border-radius: 100px / 50px; }
}

div {
  animation: expand 2s infinite;
  mix-blend-mode: multiply;
}

border-radiusの使用例

これまでに学んだborder-radiusの使用法を応用し、具体的な使用例について学んでいきましょう。

次の3つの内容を中心に説明します。

• ポップなレイアウト作成
• 角丸四角ボタンの作成
• 丸ボタンの作成

ポップなレイアウト作成

border-radiusを使用することで、ウェブページの要素に角丸を追加し、ポップなレイアウトを作成できます。

以下のCSSコードで、ボックスの四隅に異なる半径の円弧を指定し、ユニークな形状を作成しましょう。

div {
  border-radius: 50px 20px 30px 40px;
}

このようにして、ユーザーの目を引くクリエイティブなデザインを作り出せます。

角丸四角ボタンの作成

border-radiusを使用して、角丸四角ボタンを作成することも可能です。

この場合、ボタン全体に同じ半径の円弧を指定します。

以下は、半径を20pxに設定する例です。

button {
  border-radius: 20px;
}

角が柔らかく丸みを帯びたボタンが作成され、ユーザーフレンドリーなUIを実現できます。

丸ボタンの作成

半径をボタンの幅の半分に設定し、完全な丸ボタンの作成が可能です。

以下のCSSコードでは、ボタンの幅と高さを50pxに設定し、半径を25pxに設定しています。

button {
  width: 50px;
  height: 50px;
  border-radius: 25px;
}

このような丸ボタンは、特にアイコンと組み合わせて使用すると、見た目が整ったデザインになります。

border-radiusの対応ブラウザ

こちらでは、CSSプロパティborder-radiusが対応している主なブラウザについて解説します。

具体的には、以下の項目について確認していきましょう。

• Internet Explorerとborder-radius
• Chrome, Firefox, Safariなどの最新ブラウザとborder-radius

Internet Explorerとborder-radius

古いバージョンのInternet Explorer(IE)は、CSS3の一部であるborder-radiusをサポートしていません。

具体的には、IE8以下ではborder-radiusは使用できません。

IE9以降ではborder-radiusが正常に動作します。

Chrome, Firefox, Safariなどの最新ブラウザとborder-radius

現代の主流ブラウザであるGoogle Chrome, Mozilla Firefox, Apple Safariなどでは、border-radiusは広くサポートされています。

これらのブラウザでは、上記で説明した機能がすべて正常に動作。

ブラウザの対応状況は変わる可能性がありますので、最新の情報を常に確認することをおすすめめします。

まとめ

CSSのborder-radiusについて、当記事でご説明したこと。

• その基本的な使い方
• 応用的な使い方
• 具体的な使用例
• 異なるブラウザにおけるborder-radiusの対応状況

Webデザインにおける表現力を上げるためには、border-radiusのようなスタイリングの手法を理解し、適切に使用することが重要です。

角丸の形状はユーザーに優しい印象を与え、全体のデザインをより洗練されたものにするでしょう。

ぜひborder-radiusを使いこなして、素晴らしいWebデザインを作り出してください。