achieving rounded corners for button with border-image-source is linear gradient

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.

Temani Afif · Accepted Answer · 2019-02-13T08:05:53.217

6

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>

edited Feb 13 '19 at 08:05

answered Nov 27 '17 at 14:25

Temani Afif

245,468
26
309
415

Thanks for your solution.But, Now i am facing one more issue,button text is not showing up,it shows up only when i define content:'approve' and removed line-height. Basically i want to show button label as "Approve" with given style and it should be vertically aligned. – himanshu sharma Nov 27 '17 at 15:11
@himanshusharma ok am gonna update the answer with content ;) – Temani Afif Nov 27 '17 at 15:15
@himanshusharma check my answer again, i added content and more styles to handle it :) – Temani Afif Nov 27 '17 at 15:20
Thanks a ton for your efforts.But,it is still not in exactly in center.:( and,only on defining content:'Approve' it is showing 'Approve' label. – himanshu sharma Nov 27 '17 at 15:34
@himanshusharma did you copy all the CSS ? i made many changes ... – Temani Afif Nov 27 '17 at 15:35
@himanshusharma and in the snippet here it's not centred too ? you may also have another CSS in conflict you should consider too – Temani Afif Nov 27 '17 at 15:35
Yeah, I have used this complete CSS, and, even on inspecting element it show no override of alignment.Apart from it ,i see,on commenting content property,'approve' label comes automatically in center but,gradient color is also showing along. – himanshu sharma Nov 27 '17 at 15:56
1

Yes!! It worked finally!!!! i was missing some css elements..Thanks Man!! – himanshu sharma Nov 27 '17 at 16:30
This is the best answer I found for gradient borders with a radius. – Marc Alexander Oct 03 '19 at 05:12
it works for me, thanks! – Jonathan G Jun 13 '23 at 19:45

achieving rounded corners for button with border-image-source is linear gradient

1 Answers1