border-radiusにグラデーションが使えない!?ボーダーをグラデーションにしてさらに角を丸める

2018年6月28日

先日回ってきたデザインに、これがありました。
ボタンの縁がグラデーションで両端を丸くするデザイン。
border-imageにlinear-gradient()を指定して、
border-radiusを指定したら、なんと、丸くならないじゃないの!?
というわけで、対処法を。

要素を重ねて背景にグラデーション

はい、簡単な対処法ですね。
親要素の背景にグラデーションを指定して、
縁取りの太さを残して子要素を作成、背景は白。
親、子とものborder-radiusを指定したら完成です。
↓こんな感じ

ボタン

HTML

  1. <div class=”parent”>
  2. <div class=”child”>ボタン</div>
  3. </div>

CSS

  1. .parent {
  2. background: linear-gradient(45deg,#007eff,#ff17b1);
  3. border-radius: 16px;
  4. padding: 1px;
  5. width: 100px;
  6. }
  7. .child {
  8. background-color: #fff;
  9. border-radius: 15px;
  10. height: 30px;
  11. text-align: center;
  12. }

border-imageはborderとは異なる まとめ

border-radiusはborder-imageには効かないのですねぇ。
というわけで、無駄に要素を重ねたくはないのですが、
要素を重ねて背景でborderを表現しました。
効くように変更されないかな〜、ではでは!