Button Border Not Applying Border Radius When Set to a Gradient

[drewruef]

When setting the color of a button border to a gradient it stops applying the a border radius. Not sure if I’m doing something wrong or if it is a bug?

[nabeel]

Hi @daneruef,

Thanks for reaching out. Can you please share the URL of the page where you have the button so we can take a closer look?

Thanks!

[drewruef]

Here is the url - https://1256430.us8.myftpupload.com/

Thanks for looking into this.

[prakash_s]

Hello @daneruef,

I suspect this may be a bug. As a workaround, I suggest adding the following custom CSS code to the element’s CSS field.

$el.x-anchor {
    position: relative;
    border: none;
    border-radius: 10em;
    z-index: 0;
}

$el.x-anchor::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 3px;
    border-radius: inherit;
    background: linear-gradient(to right, #6188ff, #562abf);

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;

    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;

    pointer-events: none;
    z-index: -1;
} 

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector. If you have no idea about coding, you can subscribe to One, where customization questions are answered.

Hope it helps.
Thanks

[drewruef]

Thank you for the CSS and response and glad I could bring that bug to your attention.

[prakash_s]

You are most welcome, @daneruef