CreaTools LogoCreaTools
Tech Notes
Gradient Maker

CSSグラデーションボーダー｜角丸で詰まる原因と3つの実装法

2025-10-22

:::note ※borderで詰まりやすい人向けの「回避ガイド」記事です :::

結論（30秒で分かる要点）

  • 角丸不要：border-image が最短（2行で実装）
  • 角丸必要：background + padding が最も扱いやすい
  • 複雑な要件：疑似要素 + mask で対応

💡 グラデーションの色を決めるなら → Gradient Maker

よくある失敗（実務で踏む地雷）

❌ 失敗1：border-image で角丸が効かない

これがグラデーションボーダー実装の最大の罠。

/* ❌ 角丸が無視される */
.box {
  border: 2px solid;
  border-image: linear-gradient(90deg, #667eea, #764ba2) 1;
  border-radius: 8px; /* 効かない */
}

border-image と border-radius は共存できない。これはCSS仕様。

回避策：角丸が必要なら方法2か方法3を使う。

❌ 失敗2：疑似要素の z-index で中身が隠れる

/* ❌ コンテンツが隠れる */
.box::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(...);
  /* z-index 未指定でコンテンツの上に来る */
}

/* ✅ z-index: -1 で背面に */
.box::before {
  z-index: -1;
}

❌ 失敗3：入れ子構造で内側の角丸がズレる

/* ❌ 角丸の差分を考慮していない */
.outer { border-radius: 8px; padding: 2px; }
.inner { border-radius: 8px; } /* 角がはみ出る */

/* ✅ 内側は padding 分だけ小さく */
.outer { border-radius: 8px; padding: 2px; }
.inner { border-radius: 6px; } /* 8px - 2px = 6px */

方法1：border-image（シンプル・角丸不可）

最も少ないコードで実装できる。ただし角丸は使えない。

.gradient-border {
  border: 2px solid;
  border-image: linear-gradient(90deg, #667eea, #764ba2) 1;
}

使いどころ：角丸不要なシンプルな矩形、テーブルセルの装飾。

方法2：background + padding（角丸対応・推奨）

入れ子構造が必要だが、最も扱いやすい。

.gradient-border-simple {
  background: linear-gradient(90deg, #667eea, #764ba2);
  padding: 2px; /* ボーダー幅 */
  border-radius: 8px;
}

.gradient-border-simple > * {
  background: #fff;
  border-radius: 6px; /* 親より 2px 小さく */
}

使いどころ：カード、ボタン、入力フィールドなど大半のUI。

Tailwindでの実装

<div class="bg-gradient-to-r from-indigo-500 to-purple-500 p-0.5 rounded-lg">
  <div class="bg-white rounded-md p-4">
    コンテンツ
  </div>
</div>

方法3：疑似要素 + mask（角丸対応・高度）

入れ子なしで実装したい場合。コードは複雑だが柔軟性が高い。

.gradient-border-rounded {
  position: relative;
  background: #fff;
  border-radius: 8px;
}

.gradient-border-rounded::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 2px; /* ボーダー幅 */
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: inherit;
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask: 
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
}

使いどころ：HTMLを変更できない場合、デザインシステムのベースコンポーネント。

具体例：このUIならこの設定

ケース1：カードのホバーエフェクト

.card {
  background: linear-gradient(135deg, #667eea, #764ba2);
  padding: 2px;
  border-radius: 12px;
  transition: padding 0.2s;
}

.card:hover {
  padding: 3px; /* ホバーでボーダーを太く */
}

.card > .content {
  background: #fff;
  border-radius: 10px;
  padding: 24px;
}

→ Generatorでグラデーションを調整

ケース2：入力フィールドのフォーカス

.input-wrapper {
  background: #e5e7eb;
  padding: 2px;
  border-radius: 8px;
  transition: background 0.2s;
}

.input-wrapper:focus-within {
  background: linear-gradient(90deg, #667eea, #764ba2);
}

.input-wrapper > input {
  background: #fff;
  border: none;
  border-radius: 6px;
  padding: 12px 16px;
  outline: none;
}

ケース3：ボタンの装飾

.button {
  background: linear-gradient(90deg, #667eea, #764ba2);
  padding: 2px;
  border-radius: 9999px; /* pill shape */
}

.button > span {
  display: block;
  background: #fff;
  border-radius: 9999px;
  padding: 12px 24px;
  color: #667eea;
  font-weight: bold;
}

用途別の選び方

方法角丸コード量HTML変更推奨場面
border-image×少不要シンプルな矩形
background + padding○少必要カード、ボタン（推奨）
疑似要素 + mask○多不要HTML変更不可の場面

迷ったら「background + padding」から試す。

ブラウザ対応

ブラウザborder-image疑似要素+mask
Chrome✅✅
Safari✅✅（-webkit-必須）
Firefox✅✅
Edge✅✅

mask プロパティはSafari対応で -webkit- プレフィックスが必要。

まとめ：判断基準

条件推奨アプローチ
角丸不要border-image（2行で完了）
角丸必要background + padding（推奨）
HTML変更不可疑似要素 + mask
グラデーション調整Gradient Maker で視覚確認

この記事で解決しない場合