使用border-image-source实现按钮的圆角是线性渐变

Question

I want to achieve rounded corners for button while using border-image-source to linear gradient.

snippet is below -

button-class :card-approve-btn

CSS:-

.card-approve-btn {
    width: 85px;
   height: 30px;
  text-align: center;
  color: #485564;
    font-size: 14px;
  line-height :10px;
  font-weight: 600;

  border-radius: 6px;
  background-color: #ffffff;
  border-style: solid;
  border-width: 1px;
  border-image-source: linear-gradient(291deg, #ffb37c, #f9514f);
  border-image-slice: 1;

}

using above css is resulting in edgy corners. and, after googling, i got to know that it is not possible to have both border radius and linear-gradient. Is it Really Impossible? If No, Then please suggest if anyone has answers.

Answer 1

You can apply the gradient as the main background then use a pseudo element above it to hide it and keep only the border part visible:

 .card-approve-btn { position: relative; display:inline-block; background-image: linear-gradient(291deg, #ffb37c, #f9514f); padding:0 20px; line-height:30px; text-align: center; color: #485564; border-radius: 6px; overflow: hidden; font-size: 14px; font-weight: 600; z-index:0; } .card-approve-btn:before { content: ''; position: absolute; /* specify the value of border width here */ top: 1px; right: 1px; bottom: 1px; left: 1px; /* --- */ background-color: #fff; border-radius: 5px; box-sizing: border-box; z-index: -1; } 

 <div class="card-approve-btn"> Approve </div>