border-imageとborder-radiusの相性が悪かった話

ボタンの縁がグラデーションの角丸ボタンを作りたかったのですが、border-imageとborder-radiusを一緒に指定する単純なことでは無かったので、その対処法です。

基本のマークアップ

HTML

<div>
 <a href="#" class="btn">
   <span>button</span>
 </a>
</div>

CSS

div{
 display: flex;
 align-items: center;
 justify-content: center;
}

▼一緒に指定してみる

角丸にならない...。

CSS

a{
 padding: 15px 80px;
 border: 4px solid #e14fad;
 border-image: linear-gradient(90deg, #e14fad 0%, #f9d423 100%);
 border-image-slice: 1;
 border-radius: 100px;
 color: #000;
 font-size: 40px;
 text-decoration: none;
 text-align: center;
}

▼擬似要素を使用して背景を重ねてみる

1.aタグに「border-radius」とフォントサイズなど指定

a{
 display: flex;
 align-items: center;
 justify-content: center;
 position: relative;
 padding: 15px 120px;
 border: 1px solid #000;/*わかりやすいように入れてます。※最後に消します*/
 border-radius: 100px;
 color: #000;
 font-size: 40px;
 text-decoration: none;
 text-align: center;
}

2.グラデーションの背景をひいて重ねる

a::before{
 position: absolute;
 width: 100%;
 height: 100%;
 border-radius: inherit;/*忘れないように注意*/
 background: linear-gradient(90deg, #e14fad 0%, #f9d423 100%);
 content: "";
 z-index: 1;
}

3.さらにボタンの背景をその上に重ね、幅、高さからborderの幅を引いた値を指定する

a::after{
 position: absolute;
 width: calc(100% - 8px);
 height: calc(100% - 8px);
 border-radius: inherit;/*忘れないように注意*/
 background: #fff;
 content: "";
 z-index: 2;
}

4.テキストをその上に重ね完成です！

span{
  position: relative;
  z-index: 3;
}