本ページはプロモーションが含まれています

【CSS】枠線（border）をグラデーションにする方法！角丸にならない時の解決策も

公開日

こんにちは。岐阜の拠点から、今日もWeb制作とブログ運営のリアルな情報をお届けする当ブログです。

これまでのCSSカスタマイズ解説で、リストやテキストボックス、ボタンなど、さまざまな装飾をマスターしてきました。今回はさらにデザインの幅を広げる「枠線（border）のグラデーション」について解説します。

枠線をグラデーションにするだけで、サイバーな雰囲気や、リッチで洗練された印象を与えることができます。しかし、いざ実装しようとすると**「枠線をグラデーションにしたら、角が丸くならない（border-radiusが効かない）！」**というCSS特有の壁にぶつかる方が非常に多いです。

今回は、通常の四角いグラデーション枠線の作り方と、角丸を両立させるための「プロの裏技」をセットで解説します。

この記事でわかること

  • コピペで使える！基本のグラデーション枠線（四角形）
  • なぜborder-imageでは角丸にならないのか？
  • 【解決策】角丸＋グラデーション枠線を両立させるCSSコード

【基本】border-imageを使った四角いグラデーション枠線

まずは、最も基本的な方法です。枠線にグラデーションをかける場合、CSSの border-image プロパティを使用します。

追加CSSに貼り付けるコード

/* 基本のグラデーション枠線（角は丸くならない） */
.box_grad {
    padding: 1.5em;
    border: 4px solid; /* 枠線の太さを指定 */
    /* 左から右へ、緑から黄色へのグラデーション */
    border-image: linear-gradient(to right, #4caf50, #ffb300) 1;
    margin-bottom: 2em;
}

このコードを使えば、綺麗なグラデーション枠線が引けます。しかし、これに border-radius: 10px; などを追加しても、**角は絶対に丸くなりません**。これが border-image の仕様（画像として扱うため切り抜けない）だからです。

【解決策】角丸とグラデーション枠線を両立させるプロ技

角丸（border-radius）を効かせるためには、border-image を使わずに枠線を描く必要があります。ここで活躍するのが background-clip というプロパティです。

「背景の塗りつぶし範囲」を制御する技術で、中身（文字がある部分）は白色の背景で塗りつぶし、枠線の部分だけにグラデーション背景を表示させるという少しトリッキーな方法を使います。

See the Pen 枠線（border）をグラデーションにする方法！角丸にならない時の解決策も by 広瀬和哉 (@lpvcfdes-the-styleful) on CodePen.

追加CSSに貼り付けるコード

/* 角丸のグラデーション枠線 */
.box_grad_round {
    padding: 1.5em;
    margin-bottom: 2em;
    
    /* 1. 枠線の太さを透明（transparent）で確保する */
    border: 4px solid transparent;
    
    /* 2. 好きな角丸の数値を指定する */
    border-radius: 15px; 
    
    /* 3. 背景色を2重に設定する（手前を白色、奥をグラデーション） */
    background: 
        /* 中身は白色（padding-boxで枠線の内側まで） */
        linear-gradient(#fff, #fff) padding-box,
        /* 枠線部分はグラデーション（border-boxで枠線の外側まで） */
        linear-gradient(to right, #4caf50, #ffb300) border-box;
}

.box_grad_round p:last-child {
    margin-bottom: 0;
}

記事作成画面（HTML）での使い方

カスタムHTMLブロックで以下のように記述します。

<div class="box_grad_round">
    <p>角が丸いグラデーション枠線が完成しました！</p>
    <p>border-radiusの数値をいじれば、丸みを自由に変更できます。</p>
</div>

まとめ：少しの工夫でデザインの限界を突破できる

「〇〇ができない仕様」にぶつかった時、他のプロパティを組み合わせて解決策を見つけるのはWeb制作の醍醐味の一つです。今回の background-clip を使ったテクニックは、ボタンデザインなどにも応用できるので、ぜひ色々なカラーコードで試してみてください。

＼ 「ブログのデザインをプロに一新してほしい」という方はこちら ／

Web制作・ブログデザインを相談する

※目を引くアイキャッチ画像や、独自のCSSエフェクト制作も承っております。

一覧へ!