CSS border-radiusの基本から応用まで：モダンな角丸デザイン実装テクニック

2026年5月25日

基礎知識

Webデザインにおける視覚的な印象を決定づける要素の中で、角の形状は非常に重要な役割を果たしています。

CSSのborder-radiusプロパティは、単に四角形の角を丸めるだけでなく、モダンなUIデザインを構築するための強力なツールとして進化してきました。

本記事では、基本的な記述方法から、2026年のモダンなWeb制作でも通用する高度な応用テクニックまでを詳しく解説します。

目次 [ close ]

border-radiusの基本概念と指定方法

border-radiusプロパティは、要素の境界線の外側の角を丸めるために使用されます。

最も基本的な使い方は、ピクセル（px）やパーセント（%）といった単位を用いて、角の半径を指定する方法です。

基本的な記述パターン

値を1つ指定した場合、4つすべての角に対して同じ半径が適用されます。

CSS

.box {
  /* すべての角を10px丸める */
  border-radius: 10px;
  background-color: #3498db;
  width: 100px;
  height: 100px;
}

実行結果

四隅が半径10pxの円弧で切り取られた正方形が表示される

複数の値を指定することで、各角に対して異なる半径を割り当てることが可能です。

値の数に応じて、適用される箇所は以下のように変化します。

値の数	適用される箇所
1つ	すべての角（左上・右上・右下・左下）
2つ	1番目：左上と右下、2番目：右上と左下
3つ	1番目：左上、2番目：右上と左下、3番目：右下
4つ	左上、右上、右下、左下の順（時計回り）

値を2つ指定するパターンは、対角線上に同じ丸みをつけたい場合に非常に便利です。

%（パーセント）指定による正円の作成

要素を完全な正円にしたい場合は、正方形の要素に対して50%の値を指定するのが一般的です。

CSS

.circle {
  width: 100px;
  height: 100px;
  /* 要素の幅・高さの半分を半径にする */
  border-radius: 50%;
  background-color: #e74c3c;
}

実行結果

直径100pxの赤い正円が表示される

長方形の要素に対して50%を指定すると、楕円形になります。

これは、パーセント指定が要素自体の幅と高さに対する比率で計算されるためです。

個別の角を制御するプロパティ

一括指定プロパティであるborder-radius以外にも、各角を個別に制御するプロパティが存在します。

特定の角だけを鋭角に保ち、アクセントをつけたいデザインなどで重宝します。

border-top-left-radius（左上）
border-top-right-radius（右上）
border-bottom-right-radius（右下）
border-bottom-left-radius（左下）

これらの個別プロパティを使用することで、コードの可読性を高めることができます。

論理プロパティによるモダンな指定

2026年現在のWeb制作では、多言語対応やアクセシビリティの観点から「論理プロパティ」の使用が推奨されます。

従来の「上下左右」ではなく、「インライン方向」「ブロック方向」の開始・終了位置で指定する方法です。

CSS

.logical-radius {
  /* 書字方向（左から右など）に応じた角丸の指定 */
  border-start-start-radius: 20px; /* 左上（LTR時） */
  border-end-end-radius: 20px;   /* 右下（LTR時） */
}

論理プロパティを使用すると、日本語のような横書きからアラビア語のような右から左への言語（RTL）に切り替わった際も、レイアウトの意図を保持できます。

楕円形の角丸を作るスラッシュ記法

border-radiusの真の柔軟性は、スラッシュ（/）を用いた記法にあります。

通常、角丸は正円の一部として描かれますが、スラッシュを使うことで「水平半径」と「垂直半径」を別々に指定できます。

CSS

.oval-corners {
  width: 200px;
  height: 100px;
  /* 水平半径 / 垂直半径 */
  border-radius: 50px / 20px;
  background-color: #2ecc71;
}

実行結果

角が横に長く、縦に短い楕円の弧を描いた長方形が表示される

この記法をマスターすると、有機的な曲線を持つモダンな形状を作成できるようになります。

8つの値を駆使した複雑な形状（Blob）

スラッシュの前後にそれぞれ4つ、計8つの値を指定することで、歪んだ円のような「Blob（水滴）」形状を作成できます。

CSS

.blob-shape {
  width: 200px;
  height: 200px;
  /* 水平方向の各角 / 垂直方向の各角 */
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  background: linear-gradient(45deg, #f093fb 0%, #f5576c 100%);
}

このような形状は、背景の装飾やポートフォリオサイトの画像マスクとして非常に人気があります。

手動で計算するのは困難なため、オンラインのジェネレーターを活用するのが効率的です。

モダンUIにおける角丸の実装テクニック

最新のWebデザインでは、角丸の扱いにも細かな配慮が求められます。

単に数値を設定するだけでなく、周辺要素との調和を考える必要があります。

ネストされた要素の角丸計算

カード型のデザインなどで、親要素の中に子要素がある場合、角丸の数値には注意が必要です。

親要素と子要素に同じborder-radiusを設定すると、角の間の隙間が不自然に見えてしまいます。

視覚的に美しいネストを実現するには、「子要素の半径＝親要素の半径－パディング幅」という計算式を用います。

CSS

.parent {
  padding: 16px;
  border-radius: 24px;
}

.child {
  /* 24px - 16px = 8px */
  border-radius: 8px;
}

この計算式を適用することで、親子の角の曲線が同心円状に並び、洗練された印象を与えます。

レスポンシブ対応とclamp()関数の活用

画面サイズに応じて角丸の大きさを動的に変更したい場合、clamp()関数が有効です。

モバイルでは小さな角丸、デスクトップでは大きな角丸といった切り替えを、メディアクエリなしで実現できます。

CSS

.responsive-card {
  /* 最小8px、推奨2vw、最大20px */
  border-radius: clamp(8px, 2vw, 20px);
}

これにより、デバイスの解像度に関わらず、常に最適なデザインバランスを維持できます。

注意点とトラブルシューティング

border-radiusを使用する際に遭遇しやすい問題についても理解しておきましょう。

背景色や画像のはみ出し

子要素に背景色や画像がある場合、親要素にborder-radiusを指定しても、子要素の角が突き抜けてしまうことがあります。

これを防ぐには、親要素にoverflow: hidden;を適用する必要があります。

CSS

.parent {
  border-radius: 20px;
  /* 子要素を角丸の形に切り抜く */
  overflow: hidden;
}

この設定により、子要素のコンテンツが親の角丸の範囲内に収まります。

テーブル要素への適用

tableタグに対して直接border-radiusを指定しても、デフォルトでは反映されません。

これは、テーブルの境界線モデルが原因です。

border-collapse: separate;が指定されていることを確認するか、テーブルを囲むdivタグに角丸を適用するのが確実な方法です。

まとめ

border-radiusは、基本的なプロパティでありながら、非常に奥が深い要素です。

単純な角丸から、スラッシュ記法を用いた複雑な形状、そして論理プロパティによる多言語対応まで、その用途は多岐にわたります。

特にネストされた要素の半径計算や、clamp()関数によるレスポンシブ対応は、プロフェッショナルなコーディングにおいて欠かせないテクニックです。

今回紹介した手法を活用し、細部までこだわり抜いたモダンなWebサイト制作に役立ててください。

日々の実装の中で、数値を微調整しながら最適な視覚効果を探求してみることをおすすめします。