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;
}

 
 

• WEB
• Tips
• 技術情報