CSSでグラデーションボーダーを実装する方法（縦・横バージョン）

CSSを使って、要素のボーダーにグラデーションを適用する方法を紹介します。今回は、縦グラデーションと横グラデーションの2種類を実装します。

グラデーションボーダーの実装

ボーダーにグラデーションを適用するには、擬似要素（::before）を使用し、mask を活用する方法が有効です。

HTML

<div class="pad border_grad_vertical">
  <p>縦グラデーションボーダー</p>
</div>

<div class="pad border_grad_horizontal">
  <p>横グラデーションボーダー</p>
</div>

CSS

.pad {
  padding: 20px;
  background: white;
  text-align: center;
  margin: 20px;
  display: inline-block;
}

/* 縦グラデーションボーダー */
.border_grad_vertical {
  position: relative;
  display: inline-block;
  padding: 20px;
}

.border_grad_vertical::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  padding: 10px;
  background: linear-gradient(180deg, rgb(226,241,254) 0%, rgb(238,230,255) 50%, rgb(255,240,255) 100%);
  -webkit-mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* 横グラデーションボーダー */
.border_grad_horizontal {
  position: relative;
  display: inline-block;
  padding: 20px;
}

.border_grad_horizontal::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  padding: 10px;
  background: linear-gradient(90deg, rgb(226,241,254) 0%, rgb(238,230,255) 50%, rgb(255,240,255) 100%);
  -webkit-mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

解説

1. .pad クラスで、要素の内側の余白（padding）を設定し、デザインを統一。
2. .border_grad_vertical と .border_grad_horizontal クラスで position: relative; を設定。
3. ::before 擬似要素を使用して、それぞれ縦と横のグラデーションボーダーを作成。
4. background: linear-gradient(180deg, ...) で縦グラデーションを適用。
5. background: linear-gradient(90deg, ...) で横グラデーションを適用。
6. -webkit-mask を活用し、ボーダーのみを表示するようにマスク処理。

まとめ

この方法を使うことで、縦方向・横方向それぞれのグラデーションボーダーを簡単に実装できます。デザインに応じて、色や角度を調整して活用してください！