CSSで角丸を自由に作る方法｜border‑radiusの基本と応用を初心者向けに解説

はじめに

Web デザインにおいて、ボタンやカード、画像などの要素の角を丸くすることで、柔らかく洗練された印象を与えられます。
その実現に用いられるのが CSS のborder‑radius プロパティです。

本記事では、初心者でも理解しやすいよう、基本的な意味や書き方から、部分指定や円・楕円の作成、高度な応用テクニックまでをわかりやすく解説します。
デザインの幅を広げ、より魅力的な Web サイトを作るための知識を身につけましょう。

基本の角丸

border‑radius の基本的な意味

border‑radius は、CSS で要素の角に丸みをつけるプロパティです。

数値やパーセンテージで指定することで、直角の角を滑らかに丸く変化させることができます。

例えば、ボタンやカードの角を丸くすることで、ユーザーに親しみやすさや柔らかさを感じさせるデザインが可能です。

四隅すべて同じ丸みをつける方法

すべての角に同じ丸みを適用する場合は、単一の値を指定します。

これにより要素全体のバランスが整い、シンプルで美しい見た目に仕上がります。

<div>ボタン</div>

div {
  border-radius: 20px; /* 全ての角を丸くする */
  width: 100px;
  aspect-ratio: 2 / 1;
  color: white;
  background-color: #74e5c5;
  display: flex;
  justify-content: center;
  align-items: center;
}

四隅すべてに 20px の丸みが適用され、統一感のある角丸デザインになります。

部分指定による角丸の応用

特定の角を丸くする方法

特定の角だけを丸くしたい場合、個別プロパティを使用します。

これにより、デザインの自由度が大幅に上がります。

<div></div>

div {
  border-top-left-radius: 20px; /* 左上だけ丸くする */
  width: 100px;
  aspect-ratio: 1;
  background-color: #74e5c5;
}

個別半径指定

四隅それぞれに異なる半径を設定することも可能です。

<div></div>

div {
  border-radius: 10px 20px 30px 40px;
  width: 100px;
  aspect-ratio: 1;
  background-color: #74e5c5;
}

上左（top-left）：10px

上右（top-right）：20px

下右（bottom-right）：30px

下左（bottom-left）：40px

四隅の丸みを変化させることで、独自性のあるデザインや立体感を演出できます。

パーセンテージ指定で作成する円・楕円

パーセンテージ (%) で角丸を指定する意味

border‑radius をパーセンテージで指定すると、要素の幅や高さに応じて丸みの割合が変化します。

例えば 50%と設定すると、正方形の要素は完全な円、長方形の要素は楕円になります。

50% で円／楕円を作る方法

<div></div>

div {
  border-radius: 50%;
  width: 40px;
  aspect-ratio: 1;
  background-color: #74e5c5;
}

パーセンテージ指定を活用すれば、画像やボタンを簡単に丸型にでき、ボーダーや背景色と組み合わせることで視覚的に目立つデザインを作成できます。

高度な指定方法

スラッシュ (/) を使った水平・垂直半径の指定

水平半径と垂直半径を分けて指定する場合、スラッシュ (/) を使います。

<div></div>

div {
  border-radius: 50% 25% / 30% 10%;
  width: 40px;
  aspect-ratio: 1;
  background-color: #74e5c5;
}

この方法により、楕円形の角や複雑な形状を作成でき、自由度の高い UI デザインが可能です。

デザインと実践での注意点

角丸を多用したときの視覚的なコツ

角丸を過度に使うと要素同士のメリハリがなくなり、デザインが単調になる場合があります。

角丸はアクセントとして適度に使用し、背景色や影と組み合わせると効果的です。

ブラウザ互換性とパフォーマンスのポイント

現代の主要ブラウザでは border‑radius は標準対応ですが、古いブラウザや一部モバイル環境では正しく表示されない場合があります。

また、極端に大きな値を多用すると描画負荷が増えるため注意が必要です。

Web サイト全体の表示速度や互換性を意識しつつ、必要に応じて実際の表示を確認することが望ましいです。

border‑radius 活用時のポイント

これまでに紹介した、基本の設定方法、部分指定、パーセンテージやスラッシュ指定、高度な応用テクニックを理解することで、思い通りのデザインを作成できます。

border‑radius を使う際は特に以下のポイントを意識しましょう。

これらを意識することで、より洗練されたデザインを効率よく作れるようになります。

まとめ

border‑radius を活用すれば、ボタンやカード、画像などの角を簡単に丸くでき、柔らかく親しみやすいデザインを実現できます。
本記事で紹介したテクニックを活用し、多様なサイト制作に役立ててください。

こうした、HTML/CSS の基礎を始めとする Web 制作を学びたい方には、WEBMASTERS がおすすめです。
現役エンジニアのマンツーマン指導により、独学だけでは気づきにくいポイントも効率よく習得できます。

基礎から段階的に学び、コーディングスキルを着実に身につけていきましょう。