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

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.

4 revs · Accepted Answer · 2019-02-13 08:05:53Z

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>

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.
@himanshusharma ok am gonna update the answer with content ;)
@himanshusharma check my answer again, i added content and more styles to handle it :)
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.
Yes!! It worked finally!!!! i was missing some css elements..Thanks Man!!

Collectives™ on Stack Overflow

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

1 Answer 1

9 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Linked

Related