MENU
  1. ホーム
  2. CSS
  3. 【CSS】角丸を作るborder-radiusの使い方：一部指定やボタン実装

【CSS】角丸を作るborder-radiusの使い方：一部指定やボタン実装

CSS
css-border-radius

Webサイトの印象を角丸によって柔らかく仕上げるために欠かせないCSSがborder-radiusです。

本記事では、基本の書き方から画像やボタンへの応用、テーブルの隙間割れ対策、複雑な図形の角丸まで解説します。

また、CSSに関するカテゴリーページから学びたい内容を決めたい人は、以下のCSSページをご確認ください。

CSS | Code Stock
目次

角丸を作る：border-radiusの使い方

Webデザインにおいて、少しの工夫でサイト全体の印象を柔らかく見せることができるのが角丸のデザインです。

ボタンや画像、カード型のレイアウトなど、要素の角を丸くする方法をマスターすることはWebサイト制作の必須スキルと言えます。

ここでは、角丸の基本から、角を丸める際の実務的な注意点まで解説します。

角丸を作る
  • border-radiusプロパティの書き方と角丸
  • 一部の角だけを丸くする指定

border-radiusプロパティの書き方と角丸

要素の角を丸めるには、CSSのborder-radiusプロパティを使用します。

これを指定するだけで、角丸を作成できます。

数値を大きくするほど丸みが強くなり、border-radius: 50%;と指定すれば正円を作ることも可能です。

また、枠線だけでなく、角丸背景のように背景色や背景画像が設定された要素にも適用されます。

親要素で角丸を作った際、中身の子要素のはみ出しを防ぐには、親要素にoverflow: hidden;をセットで指定してください。

これにより、親の丸い枠線に沿って、中身の要素も切り取られます。

❌ 失敗：中の画像が角丸を突き破る

サンプル画像

⭕️ 正解：overflow: hidden で切り取る

サンプル画像
/* ❌ 親に角丸をつけただけ */
.wrong-box {
  border-radius: 20px;
  background-color: #e9ecef;
}

/* ⭕️ overflow: hidden を併用して中身も丸く切り抜く */
.correct-box {
  border-radius: 20px;
  overflow: hidden; /* 💡 はみ出た部分を隠す（切り取る） */
  background-color: #e9ecef;
}
HTMLコード表示
<div class="br-sec1-wrapper">

  <div class="br-demo-area">
    <div class="br-box-container">
      <p class="br-caption">❌ 失敗：中の画像が角丸を突き破る</p>
      <div class="br-box-wrong">
        <img src="https://images.unsplash.com/photo-1550684848-fac1c5b4e853?auto=format&fit=crop&w=300&q=80" alt="サンプル画像" class="br-img">
      </div>
    </div>

    <div class="br-box-container">
      <p class="br-caption" style="color:#198754;">⭕️ 正解：overflow: hidden で切り取る</p>
      <div class="br-box-correct">
        <img src="https://images.unsplash.com/photo-1550684848-fac1c5b4e853?auto=format&fit=crop&w=300&q=80" alt="サンプル画像" class="br-img">
      </div>
    </div>
  </div>

  <div class="br-code">
    /* ❌ 親に角丸をつけただけ */<br>
    <span class="hl-blue">.wrong-box</span> {<br>
      <span class="hl-red">border-radius: 20px;</span><br>
      <span class="hl-green">background-color: #e9ecef;</span><br>
    }<br><br>

    /* ⭕️ overflow: hidden を併用して中身も丸く切り抜く */<br>
    <span class="hl-blue">.correct-box</span> {<br>
      <span class="hl-red">border-radius: 20px;</span><br>
      <span class="hl-red">overflow: hidden;</span> /* 💡 はみ出た部分を隠す（切り取る） */<br>
      <span class="hl-green">background-color: #e9ecef;</span><br>
    }
  </div>

</div>
CSSコード表示
.br-sec1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.br-demo-area {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  margin-bottom: 20px;
}

.br-box-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 200px;
}

.br-caption {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #dc3545;
  text-align: center;
}

/* ❌ 失敗例 */
.br-box-wrong {
  width: 100%;
  height: 150px;
  background-color: #e9ecef;
  border: 3px solid #dc3545;
  /* 角丸を指定 */
  border-radius: 20px; 
}

/* ⭕️ 成功例 */
.br-box-correct {
  width: 100%;
  height: 150px;
  background-color: #e9ecef;
  border: 3px solid #198754;
  /* 角丸を指定 */
  border-radius: 20px; 
  /* 💡 鉄則：はみ出しを隠す */
  overflow: hidden; 
}

/* 中の画像 */
.br-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.br-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
}

.hl-blue { color: #61afef; font-weight: bold; }
.hl-red { color: #e06c75; font-weight: bold; }
.hl-green { color: #98c379; font-weight: bold; }

overflowプロパティの使い方を詳しく知りたい人は「【html&css】overflowの使い方とhiddenやscrollの使い分け」を一読ください。

【html&css】overflowの使い方とhiddenやscrollの使い分け

一部の角だけを丸くする指定

ブログのカード型リンクやタブUIを作る際は、四隅全てではなく一部の角だけを丸くしたい場面があります。

特に、サムネイル画像の上だけ角丸にするデザインは、Webサイトで頻出するレイアウトです。

border-radiusの一括指定は、「左上」を起点として「時計回り」に指定するルールを覚えてください。

border-radius: 左上 右上 右下 左下;の順番になります。

「上だけ」を丸くしたいならborder-radius: 10px 10px 0 0;、「右だけ」ならborder-radius: 0 10px 10px 0;になります。

時計回りのルールを暗記しておけば迷うことはありません。

⭕️ 左上から時計回りに指定する

上だけ角丸
テキストテキスト
右下だけ角丸
/* 💡 上の角だけを丸くする（左上、右上、右下、左下の順） */
.top-only {
  border-radius: 20px 20px 0 0;
}

/* 💡 吹き出しのように、1箇所だけ丸くする（右下のみ） */
.custom-shape {
  border-radius: 0 0 20px 0;
}
HTMLコード表示
<div class="br-sec2-wrapper">

  <p class="br-caption" style="color:#0d6efd;">⭕️ 左上から時計回りに指定する</p>

  <div class="br-demo-area">
    
    <div class="br-card">
      <div class="br-card-img br-top-only">上だけ角丸</div>
      <div class="br-card-body">テキストテキスト</div>
    </div>

    <div class="br-card br-custom-shape">
      <div class="br-card-body" style="height: 100%; display: flex; align-items: center; justify-content: center;">
        右下だけ角丸
      </div>
    </div>

  </div>

  <div class="br-code">
    /* 💡 上の角だけを丸くする（左上、右上、右下、左下の順） */<br>
    <span class="hl-blue">.top-only</span> {<br>
      <span class="hl-red">border-radius: 20px 20px 0 0;</span><br>
    }<br><br>

    /* 💡 吹き出しのように、1箇所だけ丸くする（右下のみ） */<br>
    <span class="hl-blue">.custom-shape</span> {<br>
      <span class="hl-red">border-radius: 0 0 20px 0;</span><br>
    }
  </div>

</div>
CSSコード表示
.br-sec2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.br-card {
  width: 180px;
  height: 150px;
  background-color: #fff;
  border: 1px solid #ced4da;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
  /* 💡 親要素（カード全体）の上の角を丸くする */
  border-radius: 20px 20px 0 0;
  /* 💡 鉄則：はみ出した中身（内部の四角い角）を隠す（切り取る） */
  overflow: hidden;
}

/* 💡 上だけを丸くする画像エリア */
.br-top-only {
  height: 80px;
  background: linear-gradient(135deg, #0d6efd, #0dcaf0);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
}

.br-card-body {
  padding: 15px;
  font-size: 13px;
  color: #666;
  text-align: center;
}

/* 💡 右下だけを丸くする特殊な形 */
.br-custom-shape {
  background-color: #e2e3e5;
  border-color: #adb5bd;
  /* 左上、右上、右下、左下 */
  border-radius: 0 0 40px 0; 
}

要素別：画像・文字背景・ボタンの角丸

同じborder-radiusプロパティでも、対象が画像なのか、テキスト背景なのか、あるいはクリックさせるボタンなのかによって、見せるための数値や指定方法が変わります。

ここでは、Webサイトを構成する主要なパーツごとに、角丸の実装を解説します。

実務で使えるサンプルコードも用意していますので、ぜひ活用してください。

要素別：画像・文字背景・ボタンの角丸
  • 画像や写真・文字の背景を角丸にする方法
  • 角丸ボタンのコピペデザイン集

画像や写真・文字の背景を角丸にする方法

Webサイトのサムネイル画像やプロフィール写真など、画像の角丸はよく使われる装飾の一つです。

また、見出しやラベルとして文字背景の角丸を使用すると、情報が整理されて読みやすいデザインになります。

画像を角丸にする方法は、基本的に<img>タグに対して直接border-radiusを指定するだけで完成します。

テキストの背景を角丸にする場合は、十分なpadding（内側の余白）をセットで指定してください。

丸みが強ければ強いほど、四隅のスペースが削られるため、左右のpaddingを少し多めに取るのがよいです。

⭕️ 画像の直接角丸と、余白を計算した文字背景

画像の角丸 (15px)

PCとデスク

文字背景の角丸

NEW お知らせ

角に文字がぶつからないよう、
左右のpaddingを広めに取ります。

/* 💡 画像を直接角丸にする */
.rounded-img {
  border-radius: 15px;
  width: 100%;
  height: auto;
}

/* ⭕️ 文字背景は左右のpaddingを広めに取る */
.badge-new {
  background-color: #dc3545;
  color: white;
  border-radius: 4px; /* 小さめの丸み */
  padding: 4px 8px; /* 💡 上下4px、左右8px */
}

.tag-info {
  background-color: #e9ecef;
  color: #333;
  border-radius: 50px; /* カプセル型 */
  padding: 4px 15px; /* 💡 丸みが強いので左右をさらに広く */
}
HTMLコード表示
<div class="br-elem-wrapper">

  <p class="br-elem-caption">⭕️ 画像の直接角丸と、余白を計算した文字背景</p>

  <div class="br-elem-demo-area">
    
    <div class="br-elem-box">
      <p class="br-elem-label">画像の角丸 (15px)</p>
      <img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=300&q=80" alt="PCとデスク" class="br-elem-img">
    </div>

    <div class="br-elem-box">
      <p class="br-elem-label">文字背景の角丸</p>
      <div class="br-elem-text-wrap">
        <span class="br-elem-badge">NEW</span>
        <span class="br-elem-tag">お知らせ</span>
      </div>
      <p class="br-elem-desc">角に文字がぶつからないよう、<br>左右のpaddingを広めに取ります。</p>
    </div>

  </div>

  <div class="br-elem-code">
    /* 💡 画像を直接角丸にする */<br>
    <span class="hl-blue">.rounded-img</span> {<br>
      <span class="hl-red">border-radius: 15px;</span><br>
      <span class="hl-green">width: 100%;</span><br>
      <span class="hl-green">height: auto;</span><br>
    }<br><br>

    /* ⭕️ 文字背景は左右のpaddingを広めに取る */<br>
    <span class="hl-blue">.badge-new</span> {<br>
      <span class="hl-green">background-color: #dc3545;</span><br>
      <span class="hl-green">color: white;</span><br>
      <span class="hl-red">border-radius: 4px;</span> /* 小さめの丸み */<br>
      <span class="hl-red">padding: 4px 8px;</span> /* 💡 上下4px、左右8px */<br>
    }<br><br>

    <span class="hl-blue">.tag-info</span> {<br>
      <span class="hl-green">background-color: #e9ecef;</span><br>
      <span class="hl-green">color: #333;</span><br>
      <span class="hl-red">border-radius: 50px;</span> /* カプセル型 */<br>
      <span class="hl-red">padding: 4px 15px;</span> /* 💡 丸みが強いので左右をさらに広く */<br>
    }
  </div>

</div>
CSSコード表示
.br-elem-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.br-elem-caption {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.br-elem-demo-area {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 4px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
}

.br-elem-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 200px;
}

.br-elem-label {
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

/* 💡 画像の角丸 */
.br-elem-img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 15px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.br-elem-text-wrap {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

/* 💡 文字背景の角丸（バッジ風） */
.br-elem-badge {
  background-color: #dc3545;
  color: white;
  font-weight: bold;
  font-size: 12px;
  /* 少しの丸み */
  border-radius: 4px; 
  /* 左右の余白を多めに */
  padding: 4px 8px; 
}

/* 💡 文字背景の角丸（タグ風） */
.br-elem-tag {
  background-color: #fff;
  color: #333;
  font-weight: bold;
  font-size: 12px;
  border: 1px solid #ced4da;
  /* カプセル型（完全な丸み） */
  border-radius: 50px; 
  /* 左右の余白をさらに多めに */
  padding: 4px 15px; 
}

.br-elem-desc {
  font-size: 11px;
  color: #666;
  text-align: center;
  line-height: 1.5;
  margin: 0;
}

.br-elem-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
}

.hl-blue {
  color: #61afef;
  font-weight: bold;
}

.hl-red {
  color: #e06c75;
  font-weight: bold;
}

.hl-green {
  color: #98c379;
  font-weight: bold;
}

角丸ボタンのコピペデザイン集

コンバージョンに直結する角丸ボタンのデザインは、サイトの成果を左右します。

人間の心理として、尖った四角形よりも、少し丸みを帯びた形状の方が「押しやすい」「親しみやすい」と感じる傾向があります。

ボタンの角を丸くするだけで、クリック率が向上するケースも少なくありません。

ここでは、実務で使えるコピペ用角丸ボタンのデザインを3つご紹介します。

ボタンの角丸は、「サイトのターゲット層」と「ブランドイメージ」に合わせて数値をコントロールしてください。

  • 信頼感・誠実さ（BtoBなど）：3px ~ 5px（少しだけ角を取る程度）
  • 親しみやすさ・標準的（ECサイトなど）：8px ~ 12px（一般的な角丸）
  • ポップ・カジュアル（BtoC・キャンペーンなど）：50px（完全なカプセル型）

また、ボタンにはcursor: pointer;（マウスカーソルを指マークにする）と、transitionを指定して、ユーザーに「押せる要素だ」と直感的に認識させるのがよいです。

⭕️ ブランドイメージに合わせた角丸の使い分け

① 信頼・誠実（3px）
BtoBコーポレートサイト等

詳しく見る

② 親しみ・標準（8px）
ECサイト・ブログ等

カートに入れる

③ ポップ・行動喚起（50px）
キャンペーン・LP等

無料登録はこちら ＞
/* 💡 共通のボタンベース */
.btn-base {
  display: inline-block;
  padding: 15px 40px;
  text-decoration: none;
  text-align: center;
  font-weight: bold;
  cursor: pointer; /* 指マーク */
  transition: 0.3s ease; /* 滑らかなホバー */
}

/* 💡 ① 信頼感（少しだけ角を取る） */
.btn-radius-sm {
  border-radius: 3px;
}

/* 💡 ② 親しみ（標準的な角丸） */
.btn-radius-md {
  border-radius: 8px;
}

/* 💡 ③ ポップ（完全なカプセル型） */
.btn-radius-lg {
  border-radius: 50px;
}
HTMLコード表示
<div class="br-btn-wrapper">
  
  <p class="br-elem-caption">⭕️ ブランドイメージに合わせた角丸の使い分け</p>

  <div class="br-btn-demo-area">
    
    <div class="br-btn-box">
      <p class="br-btn-label">① 信頼・誠実（3px）<br><small>BtoBコーポレートサイト等</small></p>
      <a href="#" class="br-btn br-btn-solid br-radius-sm">詳しく見る</a>
    </div>

    <div class="br-btn-box">
      <p class="br-btn-label">② 親しみ・標準（8px）<br><small>ECサイト・ブログ等</small></p>
      <a href="#" class="br-btn br-btn-solid br-radius-md" style="background-color: #198754;">カートに入れる</a>
    </div>

    <div class="br-btn-box">
      <p class="br-btn-label">③ ポップ・行動喚起（50px）<br><small>キャンペーン・LP等</small></p>
      <a href="#" class="br-btn br-btn-outline br-radius-lg">無料登録はこちら ＞</a>
    </div>

  </div>

  <div class="br-elem-code">
    /* 💡 共通のボタンベース */<br>
    <span class="hl-blue">.btn-base</span> {<br>
      <span class="hl-green">display: inline-block;</span><br>
      <span class="hl-green">padding: 15px 40px;</span><br>
      <span class="hl-green">text-decoration: none;</span><br>
      <span class="hl-green">text-align: center;</span><br>
      <span class="hl-green">font-weight: bold;</span><br>
      <span class="hl-red">cursor: pointer;</span> /* 指マーク */<br>
      <span class="hl-red">transition: 0.3s ease;</span> /* 滑らかなホバー */<br>
    }<br><br>

    /* 💡 ① 信頼感（少しだけ角を取る） */<br>
    <span class="hl-blue">.btn-radius-sm</span> {<br>
      <span class="hl-red">border-radius: 3px;</span><br>
    }<br><br>

    /* 💡 ② 親しみ（標準的な角丸） */<br>
    <span class="hl-blue">.btn-radius-md</span> {<br>
      <span class="hl-red">border-radius: 8px;</span><br>
    }<br><br>

    /* 💡 ③ ポップ（完全なカプセル型） */<br>
    <span class="hl-blue">.btn-radius-lg</span> {<br>
      <span class="hl-red">border-radius: 50px;</span><br>
    }
  </div>

</div>
CSSコード表示
.br-btn-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.br-btn-demo-area {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  background-color: #e9ecef;
  padding: 40px 20px;
  border-radius: 4px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
}

.br-btn-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 220px;
}

.br-btn-label {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
  text-align: center;
  line-height: 1.4;
}

/* 💡 共通ベーススタイル */
.br-btn {
  display: inline-block;
  padding: 15px 30px;
  text-decoration: none;
  text-align: center;
  font-weight: bold;
  font-size: 14px;
  /* 💡 クリックできることを示す */
  cursor: pointer; 
  /* 💡 アニメーションを滑らかに */
  transition: all 0.3s ease; 
  /* テキストの意図しない選択を防ぐ */
  user-select: none;
  width: 100%;
  box-sizing: border-box;
}

/* 塗りつぶしデザイン */
.br-btn-solid {
  background-color: #0d6efd;
  color: #fff;
  border: none;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.br-btn-solid:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
  opacity: 0.9;
}

/* アウトライン（枠線）デザイン */
.br-btn-outline {
  background-color: #fff;
  color: #dc3545;
  border: 2px solid #dc3545;
}
.br-btn-outline:hover {
  background-color: #dc3545;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(220,53,69,0.2);
}

/* 💡 角丸のサイズ調整 */
.br-radius-sm {
  /* 信頼感（少しだけ角を落とす） */
  border-radius: 3px; 
}

.br-radius-md {
  /* 親しみ（標準的） */
  border-radius: 8px; 
}

.br-radius-lg {
  /* ポップ（完全なカプセル型） */
  border-radius: 50px; 
}

リンクボタンの作り方を詳しく知りたい人は「【html&css】aタグ（リンク）の使い方とWebデザインによる装飾」を一読ください。

【html&css】aタグ（リンク）の使い方とWebデザインによる装飾

枠線やテーブルと角丸を組み合わせる

要素の背景色や画像を角丸にするのは簡単ですが、枠線や表にborder-radiusを適用しようとすると、CSSの複雑な仕様にぶつかり、思い通りにいかないことがあります。

ここでは、「破線やグラデーション枠の角丸」「テーブルのレイアウト崩れ」「内側と外側で異なる角丸を作る」について解説します。

枠線やテーブルと角丸を組み合わせる
  • 枠線（実線・破線・グラデーション）を角丸にする
  • テーブル全体を角丸にする際のはみ出し対策
  • 内側だけ角丸にしたい！outlineや二重線

枠線（実線・破線・グラデーション）を角丸にする

単色で塗りつぶされた実線や破線の角丸を作りたい場合は、対象の要素にborder: 2px dashed #333;とborder-radius: 10px;を同時に指定するだけでが完成します。

また、グラデーションの枠線を角丸にしたい場合、border-imageは使ってはいけません。

代わりに、「背景を2重に重ねる（background-clipの活用）」というテクニックを使います。

要素のボーダーをtransparent（透明）にした上で、背景（background）に「内側の塗りつぶし色」と「外側のグラデーション色」をカンマ区切りで2つ指定し、padding-boxとborder-boxで切り抜くのがよいです。

⭕️ 破線の角丸と、高度なグラデーション枠線の角丸

破線の角丸

DASHED

❌ border-image使用

ERROR

⭕️ background-clip使用

SUCCESS
/* 💡 通常の破線はそのまま効く */
.dashed-box {
  border: 3px dashed #6f42c1;
  border-radius: 15px;
}

/* ❌ border-imageは角が尖る */
.wrong-gradient {
  border: 4px solid;
  border-image: linear-gradient(to right, #fd7e14, #ffc107) 1;
  border-radius: 15px; /* 💡 完全に無視される */
}

/* ⭕️ 背景を2重にして、ボーダー領域だけグラデーションを見せる */
.correct-gradient {
  border: 4px solid transparent; /* 💡 枠線自体は透明にする */
  border-radius: 15px; /* 💡 これが効く */
  background:
    linear-gradient(#fff, #fff) padding-box, /* 💡 内側（中身）の背景色 */
    linear-gradient(to right, #0d6efd, #0dcaf0) border-box; /* 💡 枠線部分のグラデーション */
}
HTMLコード表示
<div class="br-border-wrapper">
  
  <p class="br-border-caption">⭕️ 破線の角丸と、高度なグラデーション枠線の角丸</p>

  <div class="br-border-demo-area">
    
    <div class="br-border-box">
      <p class="br-border-label">破線の角丸</p>
      <div class="br-border-item is-dashed">DASHED</div>
    </div>

    <div class="br-border-box">
      <p class="br-border-label">❌ border-image使用</p>
      <div class="br-border-item is-gradient-wrong">ERROR</div>
    </div>

    <div class="br-border-box">
      <p class="br-border-label">⭕️ background-clip使用</p>
      <div class="br-border-item is-gradient-correct">SUCCESS</div>
    </div>

  </div>

  <div class="br-elem-code">
    /* 💡 通常の破線はそのまま効く */<br>
    <span class="hl-blue">.dashed-box</span> {<br>
      <span class="hl-red">border: 3px dashed #6f42c1;</span><br>
      <span class="hl-red">border-radius: 15px;</span><br>
    }<br><br>

    /* ❌ 初心者のミス：border-imageは角が尖る */<br>
    <span class="hl-blue">.wrong-gradient</span> {<br>
      <span class="hl-red">border: 4px solid;</span><br>
      <span class="hl-red">border-image: linear-gradient(to right, #fd7e14, #ffc107) 1;</span><br>
      <span class="hl-red">border-radius: 15px;</span> /* 💡 完全に無視される */<br>
    }<br><br>

    /* ⭕️ プロの鉄則：背景を2重にして、ボーダー領域だけグラデーションを見せる */<br>
    <span class="hl-blue">.correct-gradient</span> {<br>
      <span class="hl-red">border: 4px solid transparent;</span> /* 💡 枠線自体は透明にする */<br>
      <span class="hl-red">border-radius: 15px;</span> /* 💡 これが効く */<br>
      <span class="hl-green">background:</span><br>
        <span class="hl-green">linear-gradient(#fff, #fff) padding-box,</span> /* 💡 内側（中身）の背景色 */<br>
        <span class="hl-green">linear-gradient(to right, #0d6efd, #0dcaf0) border-box;</span> /* 💡 枠線部分のグラデーション */<br>
    }
  </div>

</div>
CSSコード表示
.br-border-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.br-border-caption {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.br-border-demo-area {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 4px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
}

.br-border-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.br-border-label {
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

.br-border-item {
  width: 120px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
  background-color: #fff;
  color: #333;
}

/* 💡 破線 */
.is-dashed {
  border: 3px dashed #6f42c1;
  border-radius: 15px;
}

/* ❌ 失敗：border-image */
.is-gradient-wrong {
  border: 4px solid;
  border-image: linear-gradient(135deg, #fd7e14, #ffc107) 1;
  border-radius: 15px; /* 無視される */
}

/* ⭕️ 成功：background-clip */
.is-gradient-correct {
  border: 4px solid transparent; /* 枠線を透明に */
  border-radius: 15px;
  background: 
    linear-gradient(#fff, #fff) padding-box, /* 内側は白 */
    linear-gradient(135deg, #0d6efd, #0dcaf0) border-box; /* 外側のボーダー領域だけグラデ */
}

テーブル全体を角丸にする際のはみ出し対策

料金表やスペック表など角丸のテーブルを実装する際、直接テーブルに角丸の設定を実施することができます。

また、テーブルを囲む親要素（<div class="table-wrap"> など）を新しく作り、親要素に対してborder-radiusとoverflow: hidden;を指定するのも可能です。

⭕️ テーブルの角丸は「親要素のdivで囲んで切り取る」のが正解

❌ tableに直接指定

見出し見出し
データデータ

⭕️ divラッパーで囲む

見出し見出し
データデータ
/* ❌ 初心者のミス：collapseのテーブルに直接指定しても無視される */
table.wrong {
  border-collapse: collapse;
  border-radius: 15px; /* 💡 効かない */
  border: 2px solid #0d6efd;
}

/* ⭕️ プロの鉄則：テーブルを囲む親divを作って、そこで角丸にする */
.table-wrapper {
  border-radius: 15px; /* 💡 親で角を丸くする */
  overflow: hidden; /* 💡 はみ出たテーブルの角を切り取る */
  border: 2px solid #0d6efd; /* 💡 枠線も親に持たせる */
}

/* テーブル自体は枠線を消して、中身の線だけ引く */
.table-wrapper table {
  border-collapse: collapse;
  width: 100%;
  border: none; /* 💡 外枠は親に任せるので消す */
}
HTMLコード表示
<div class="br-table-wrapper">
  
  <p class="br-border-caption">⭕️ テーブルの角丸は「親要素のdivで囲んで切り取る」のが正解</p>

  <div class="br-table-demo-area">
    
    <div class="br-table-box">
      <p class="br-border-label">❌ tableに直接指定</p>
      <table class="br-table-wrong">
        <thead>
          <tr><th>見出し</th><th>見出し</th></tr>
        </thead>
        <tbody>
          <tr><td>データ</td><td>データ</td></tr>
        </tbody>
      </table>
    </div>

    <div class="br-table-box">
      <p class="br-border-label">⭕️ divラッパーで囲む</p>
      <div class="br-table-wrap-correct">
        <table class="br-table-inner">
          <thead>
            <tr><th>見出し</th><th>見出し</th></tr>
          </thead>
          <tbody>
            <tr><td>データ</td><td>データ</td></tr>
          </tbody>
        </table>
      </div>
    </div>

  </div>

  <div class="br-elem-code">
    /* ❌ collapseのテーブルに直接指定しても無視される */<br>
    <span class="hl-blue">table.wrong</span> {<br>
      <span class="hl-green">border-collapse: collapse;</span><br>
      <span class="hl-red">border-radius: 15px;</span> /* 💡 効かない */<br>
      <span class="hl-green">border: 2px solid #0d6efd;</span><br>
    }<br><br>

    /* ⭕️ テーブルを囲む親divを作って、そこで角丸にする */<br>
    <span class="hl-blue">.table-wrapper</span> {<br>
      <span class="hl-red">border-radius: 15px;</span> /* 💡 親で角を丸くする */<br>
      <span class="hl-red">overflow: hidden;</span> /* 💡 はみ出たテーブルの角を切り取る */<br>
      <span class="hl-green">border: 2px solid #0d6efd;</span> /* 💡 枠線も親に持たせる */<br>
    }<br><br>

    /* テーブル自体は枠線を消して、中身の線だけ引く */<br>
    <span class="hl-blue">.table-wrapper table</span> {<br>
      <span class="hl-green">border-collapse: collapse;</span><br>
      <span class="hl-green">width: 100%;</span><br>
      <span class="hl-green">border: none;</span> /* 💡 外枠は親に任せるので消す */<br>
    }
  </div>

</div>
CSSコード表示
.br-table-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.br-table-demo-area {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  background-color: #e9ecef;
  padding: 30px 20px;
  border-radius: 4px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
}

.br-table-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 200px;
}

/* テーブル共通装飾 */
.br-table-wrong th, .br-table-wrong td,
.br-table-inner th, .br-table-inner td {
  padding: 10px;
  text-align: center;
  font-size: 13px;
  border: 1px solid #ced4da;
}
.br-table-wrong th, .br-table-inner th {
  background-color: #e7f1ff;
  color: #0d6efd;
}
.br-table-wrong td, .br-table-inner td {
  background-color: #fff;
}

/* ❌ 失敗：テーブルに直接 */
.br-table-wrong {
  border-collapse: collapse;
  width: 100%;
  border: 2px solid #0d6efd;
  /* 効かない角丸 */
  border-radius: 15px; 
}

/* ⭕️ 成功：ラッパーで囲む */
.br-table-wrap-correct {
  width: 100%;
  /* 親で角丸 */
  border-radius: 15px; 
  /* 親で切り取り */
  overflow: hidden; 
  /* 親で外枠 */
  border: 2px solid #0d6efd; 
}

.br-table-inner {
  border-collapse: collapse;
  width: 100%;
  /* 内側のテーブルは外枠なし */
  border-style: hidden; 
}

tableタグの使い方あるいはテーブルの作り方を詳しく知りたい人は「【HTML】tableタグ（テーブル）の使い方：枠線・セル結合・レスポンシブ」を一読ください。

【HTML】tableタグ（テーブル）の使い方：枠線・セル結合・レスポンシブ

内側だけ角丸にしたい！outlineや二重線

要素に二重線を引いたり、フォーカス時の枠線（outline）を付けたりする際、枠線に対する角丸の制御で悩むことがあります。

等間隔な二重の角丸を作りたい場合はborderやoutlineではなく、box-shadowをカンマ区切りで複数重ねるのがよいです。

box-shadow: 0 0 0 4px #fff, 0 0 0 8px #0d6efd;のように、ぼかし（第3引数）を0にして、広がり（第4引数）だけを指定することでborder-radiusの丸みに追従する多重の枠線を描画できます。

⭕️ 美しい二重の角丸を作るには、box-shadowを重ねる

❌ border: double

角が潰れる

⭕️ box-shadowの重ね掛け

美しい二重線
/* ❌ doubleは内側と外側の半径計算が美しくない */
.wrong-double {
  border: 8px double #0d6efd;
  border-radius: 15px;
}

/* ⭕️ box-shadowで「広がり」だけを指定して重ねる */
.correct-shadow {
  background-color: #0d6efd;
  color: white;
  border-radius: 10px; /* 💡 ベースの角丸 */
  box-shadow:
    0 0 0 4px #fff, /* 💡 1層目：内側の白い隙間 */
    0 0 0 8px #0d6efd; /* 💡 2層目：外側の青い線 */
}
HTMLコード表示
<div class="br-outline-wrapper">
  
  <p class="br-border-caption">⭕️ 美しい二重の角丸を作るには、box-shadowを重ねる</p>

  <div class="br-table-demo-area">
    
    <div class="br-border-box">
      <p class="br-border-label">❌ border: double</p>
      <div class="br-outline-item is-double">角が潰れる</div>
    </div>

    <div class="br-border-box">
      <p class="br-border-label">⭕️ box-shadowの重ね掛け</p>
      <div class="br-outline-item is-shadow">美しい二重線</div>
    </div>

  </div>

  <div class="br-elem-code">
    /* ❌ doubleは内側と外側の半径計算が美しくない */<br>
    <span class="hl-blue">.wrong-double</span> {<br>
      <span class="hl-red">border: 8px double #0d6efd;</span><br>
      <span class="hl-red">border-radius: 15px;</span><br>
    }<br><br>

    /* ⭕️ box-shadowで「広がり」だけを指定して重ねる */<br>
    <span class="hl-blue">.correct-shadow</span> {<br>
      <span class="hl-green">background-color: #0d6efd;</span><br>
      <span class="hl-green">color: white;</span><br>
      <span class="hl-red">border-radius: 10px;</span> /* 💡 ベースの角丸 */<br>
      <span class="hl-red">box-shadow:</span><br>
        <span class="hl-red">0 0 0 4px #fff,</span> /* 💡 1層目：内側の白い隙間 */<br>
        <span class="hl-red">0 0 0 8px #0d6efd;</span> /* 💡 2層目：外側の青い線 */<br>
    }
  </div>

</div>
CSSコード表示
.br-outline-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.br-outline-item {
  width: 140px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 13px;
  background-color: #0d6efd;
  color: white;
  margin-top: 10px;
}

/* ❌ 失敗：double */
.is-double {
  background-color: #fff;
  color: #0d6efd;
  border: 8px double #0d6efd;
  border-radius: 15px;
}

/* ⭕️ 成功：box-shadowの多重掛け */
.is-shadow {
  border-radius: 10px;
  /* x y blur spread color */
  box-shadow: 
    0 0 0 4px #e9ecef, /* 1層目：デモ背景と同じ色にして隙間を演出 */
    0 0 0 8px #0d6efd; /* 2層目：外側の線 */
}

複雑な図形（三角形・台形）の角丸

Webデザインでは、四角形や円形だけでなく、三角形・台形・吹き出しなど複雑な図形をCSSで表現することがあります。

しかし、これらにborder-radiusを適用しようとすると、通常の四角形とは異なる特有の壁にぶつかります。

ここでは、実務で直面する「複雑な図形の角が丸くならない問題」の解決策とCSSプロパティを使った切り抜きを解説します。

複雑な図形（三角形・台形）の角丸
  • 三角形・台形・吹き出しの角を丸くする
  • clip-pathを使った角丸表現

三角形・台形・吹き出しの角を丸くする

三角形や吹き出しの角丸を作る際、古くから使われている「borderの太さと透明（transparent）を利用して三角形を作る手法」を用いる人が多いです。

角が丸い三角形や角が丸い台形、吹き出しの「しっぽ」部分を作りたい場合は、borderのトリックは捨ててください。

実務では、「四角い要素（divや疑似要素::before）をrotate(45deg)でひし形に回転させ、border-radiusをかけて半分だけ見せる」というアプローチです。

これなら、正方形の角丸を三角形の頂点として利用できるため、角丸が実現します。

⭕️ 角丸の三角形（吹き出し）を作るプロのテクニック

❌ border三角形
(角が丸くならない)

⭕️ rotateで角丸
(美しい吹き出し)

角丸の吹き出し
/* ❌ borderで作る三角形は、頂点が丸くならない */
.wrong-triangle {
  border-bottom: 50px solid #dc3545;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-radius: 10px; /* 💡 完全に無視される */
}

/* ⭕️ 正方形を回転させて「しっぽ」を作り、角丸をかける */
.balloon::after {
  content: “”;
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 20px;
  height: 20px;
  background-color: #0d6efd;
  transform: translateX(-50%) rotate(45deg); /* 💡 45度回転させてひし形に */
  border-radius: 4px; /* 💡 ここで角丸を指定する！ */
}
HTMLコード表示
<div class="br-adv-wrapper">
  
  <p class="br-adv-caption">⭕️ 角丸の三角形（吹き出し）を作るプロのテクニック</p>

  <div class="br-adv-demo-area">
    
    <div class="br-adv-box">
      <p class="br-adv-label">❌ border三角形<br><small>(角が丸くならない)</small></p>
      <div class="br-adv-triangle-wrong"></div>
    </div>

    <div class="br-adv-box">
      <p class="br-adv-label">⭕️ rotateで角丸<br><small>(美しい吹き出し)</small></p>
      <div class="br-adv-balloon">
        角丸の吹き出し
        </div>
    </div>

  </div>

  <div class="br-adv-code">
    /* ❌ borderで作る三角形は、頂点が丸くならない */<br>
    <span class="hl-blue">.wrong-triangle</span> {<br>
      <span class="hl-red">border-bottom: 50px solid #dc3545;</span><br>
      <span class="hl-red">border-left: 30px solid transparent;</span><br>
      <span class="hl-red">border-right: 30px solid transparent;</span><br>
      <span class="hl-red">border-radius: 10px;</span> /* 💡 完全に無視される */<br>
    }<br><br>

    /* ⭕️ 正方形を回転させて「しっぽ」を作り、角丸をかける */<br>
    <span class="hl-blue">.balloon::after</span> {<br>
      <span class="hl-green">content: "";</span><br>
      <span class="hl-green">position: absolute;</span><br>
      <span class="hl-green">bottom: -8px;</span><br>
      <span class="hl-green">left: 50%;</span><br>
      <span class="hl-green">width: 20px;</span><br>
      <span class="hl-green">height: 20px;</span><br>
      <span class="hl-green">background-color: #0d6efd;</span><br>
      <span class="hl-red">transform: translateX(-50%) rotate(45deg);</span> /* 💡 45度回転させてひし形に */<br>
      <span class="hl-red">border-radius: 4px;</span> /* 💡 ここで角丸を指定する！ */<br>
    }
  </div>

</div>
CSSコード表示
.br-adv-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.br-adv-caption {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.br-adv-demo-area {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
  background-color: #e9ecef;
  padding: 40px 20px 50px 20px;
  border-radius: 4px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
}

.br-adv-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 200px;
}

.br-adv-label {
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 25px;
  color: #333;
  text-align: center;
  line-height: 1.4;
}

/* ❌ 失敗：borderで作った三角形 */
.br-adv-triangle-wrong {
  width: 0;
  height: 0;
  /* 上向きの三角形 */
  border-bottom: 60px solid #dc3545;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  /* 効かない角丸 */
  border-radius: 10px; 
}

/* ⭕️ 成功：rotateで作った角丸吹き出し */
.br-adv-balloon {
  position: relative;
  background-color: #0d6efd;
  color: white;
  padding: 15px 25px;
  font-weight: bold;
  font-size: 14px;
  /* 本体の角丸 */
  border-radius: 12px; 
  /* しっぽが裏に行かないようz-index調整用 */
  z-index: 1; 
}

/* 吹き出しの「しっぽ（三角形）」 */
.br-adv-balloon::after {
  content: "";
  position: absolute;
  /* 下にはみ出させる */
  bottom: -8px; 
  left: 50%;
  width: 24px;
  height: 24px;
  background-color: #0d6efd;
  /* 💡 45度回転させてひし形にし、中央に配置 */
  transform: translateX(-50%) rotate(45deg); 
  /* 💡 しっぽの先端を丸くする */
  border-radius: 4px; 
  /* 本体より後ろに配置 */
  z-index: -1; 
}

.br-adv-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
}

.hl-blue { color: #61afef; font-weight: bold; }
.hl-red { color: #e06c75; font-weight: bold; }
.hl-green { color: #98c379; font-weight: bold; }

clip-pathを使った角丸表現

近年、画像を自由な形に切り抜くためにclip-pathプロパティが使われます。

clip-pathで角丸を表現したい場合、以下の2つの方法を使い分けます。

  1. 四角形の内側を切り抜く場合（insetの活用）
    画像を小さく切り抜きつつ角丸にしたい場合は、clip-path: inset(10% 10% 10% 10% round 20px);というショートカット記法を使います。
    roundの後に数値を書くだけで、切り抜きと角丸が同時に行える便利テクニックです。
  2. 複雑な図形（波線、星型、台形など）の場合
    CSSで無理やり座標を書くのはやめましょう。
    IllustratorやFigmaなどのデザインツールで「角丸をつけたSVG」を作成し、SVGのパス（path('...')）をそのままclip-pathに読み込ませるのがよいです。

⭕️ clip-path inset() の round を使った高度な切り抜き

元の画像
(角丸なし)

風景画像

clip-path適用後
(内側に切り抜き＋角丸)

風景画像
/* ⭕️ inset() に round を組み合わせる */
.clip-rounded {
  /* 💡 上 右 下 左 の順に15%ずつ切り抜き、さらに角を30px丸くする */
  clip-path: inset(15% 15% 15% 15% round 30px);
  transition: clip-path 0.5s ease; /* アニメーションも可能 */
}

/* 💡 ホバーで切り抜きを解除する（元の形に戻る） */
.clip-rounded:hover {
  clip-path: inset(0% 0% 0% 0% round 0px);
}
HTMLコード表示
<div class="br-clip-wrapper">
  
  <p class="br-adv-caption">⭕️ clip-path inset() の round を使った高度な切り抜き</p>

  <div class="br-adv-demo-area">
    
    <div class="br-clip-box">
      <p class="br-adv-label">元の画像<br><small>(角丸なし)</small></p>
      <img src="https://picsum.photos/id/28/400/300" alt="風景画像" class="br-clip-img">
    </div>

    <div class="br-clip-box">
      <p class="br-adv-label">clip-path適用後<br><small>(内側に切り抜き＋角丸)</small></p>
      <img src="https://picsum.photos/id/28/400/300" alt="風景画像" class="br-clip-img is-clipped">
    </div>

  </div>

  <div class="br-adv-code">
    /* ⭕️ inset() に round を組み合わせる */<br>
    <span class="hl-blue">.clip-rounded</span> {<br>
      <span class="hl-comment">/* 💡 上 右 下 左 の順に15%ずつ切り抜き、さらに角を30px丸くする */</span><br>
      <span class="hl-red">clip-path: inset(15% 15% 15% 15% round 30px);</span><br>
      <span class="hl-green">transition: clip-path 0.5s ease;</span> /* アニメーションも可能 */<br>
    }<br><br>

    /* 💡 ホバーで切り抜きを解除する（元の形に戻る） */<br>
    <span class="hl-blue">.clip-rounded:hover</span> {<br>
      <span class="hl-red">clip-path: inset(0% 0% 0% 0% round 0px);</span><br>
    }
  </div>

</div>
CSSコード表示
.br-clip-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.br-adv-caption {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #198754;
  text-align: center;
}

.br-adv-demo-area {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
  background-color: #e9ecef;
  padding: 40px 20px;
  border-radius: 4px;
  border: 1px dashed #adb5bd;
  margin-bottom: 20px;
}

.br-clip-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 250px;
}

.br-adv-label {
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
  text-align: center;
  line-height: 1.4;
}

.br-clip-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  /* 元の画像なので角丸なし */
  border-radius: 0; 
}

/* 💡 クリップパスで内側を切り抜きつつ角丸にする */
.is-clipped {
  /* 上 右 下 左 から15%内側に切り抜き、角を30px丸くする */
  clip-path: inset(15% 15% 15% 15% round 30px);
  cursor: pointer;
  /* なめらかなアニメーション */
  transition: clip-path 0.5s ease; 
}

/* ホバーで切り抜きを解除して全画面表示にするアニメーション */
.is-clipped:hover {
  clip-path: inset(0% 0% 0% 0% round 0px);
}

.br-adv-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
}

.hl-blue { color: #61afef; font-weight: bold; }
.hl-red { color: #e06c75; font-weight: bold; }
.hl-green { color: #98c379; font-weight: bold; }
.hl-comment { color: #6c757d; font-style: italic; }

まとめ

分かりやすいようにまとめを記載します。

本記事のまとめ
  • 要素の角を丸くするにはborder-radiusプロパティを使用する。
  • 親要素の角丸から中身がはみ出すのを防ぐには、親要素にoverflow: hidden;を併用する。
  • 一部の角のみを丸くする場合は「左上、右上、右下、左下」の時計回りで数値を指定する。
  • 文字背景を角丸にする際は、テキストの窮屈さをなくす左右のpaddingを多めに確保する。
  • ボタンの角丸の強さは、ブランドイメージやサイトのターゲット層（信頼感・親しみやすさ・ポップ等）に合わせて調整する。
  • グラデーションの枠線を角丸にする場合はborder-imageは使わず、background-clipを活用して背景色を2層に重ねる。
  • テーブルを角丸にする場合はtableに直接指定せず、外側のdivラッパーにborder-radiusとoverflow: hiddenを指定する。
  • ブラウザの描画誤差によるテーブルの隙間割れを防ぐには、ラッパーの背景色をヘッダーの背景色と同化させる。
  • 二重線を角丸に沿って描画するには、border: doubleではなくbox-shadowをカンマ区切りで多重指定する。
  • 三角形や吹き出しの角丸は、枠線の交差を利用するトリックを避け、四角形をtransform: rotate(45deg)でひし形にしてから角を丸める。
  • clip-pathで画像を切り抜きながら角丸にするには、inset(上 右 下 左 round 角丸の数値)という構文を使用する。

よくある質問（FAQ）

正円のボタンやアイコン画像を作るにはどうすればいいですか？

対象の要素の幅（width）と高さ（height）を同じ値にして正方形にした上でborder-radius: 50%;を指定してください。

ピクセルではなく50%と指定することで、要素のサイズが変わっても正円を保つことができます。

親要素に角丸を指定したのに、中に入れた画像がはみ出して角が尖ってしまいます。

CSSの仕様上、親の枠線を丸くしただけでは中身は丸く切り取られません。

親要素に対して、border-radiusと一緒にoverflow: hidden;を追記してください。

これにより、親の丸い枠線からはみ出た画像の部分がトリミングされます。

「上の角だけ」「右下だけ」など一部の角だけを丸くすることはできますか？

はい、可能です。

数値を半角スペース区切りで4つ指定することで、「左上・右上・右下・左下」の時計回りの順番で個別に角丸を設定できます。

例えば、上半分だけを丸くしたい場合はborder-radius: 10px 10px 0 0;と記述します。

テーブルにborder-radiusを書いても角が丸くなりません。

テーブルの枠線を1本線にするために使われるborder-collapse: collapse;が指定されているとborder-radiusは無効になるというCSSの仕様があります。

これを解決するには、テーブル自体を丸くするのではなく、テーブル全体を<div class="table-wrap">のような親要素で囲み、親要素に対して角丸とoverflow: hidden;を指定して切り取る手法が一般的です。

<span>や<a>タグで作ったラベルに角丸を指定しても、形が崩れてしまいます。

対象の要素がインライン要素になっていることが原因です。

インライン要素は幅や高さの概念を持たないため、上下の余白や角丸が描画されません。

対象のCSSにdisplay: inline-block;またはdisplay: block;を追記して、要素の振る舞いをブロック状に変更してからborder-radiusを指定してください。

CSS

この記事を書いた人

sugiのアバター sugi Site operator

【経歴】玉川大学工学部卒業→新卒SIer企業入社→2年半後に独立→プログラミングスクール運営/受託案件→フリーランスエンジニア&SEOコンサル→Python特化のコンテンツサイトJob Code&UIコピペサイトCode Stock運営中

関連記事

目次