Production-grade gradient bordered, transparent, and rounded button

There are a lot of articles out there on making gradient-bordered buttons, but the ones I read do not provide a production-grade solution. At Preply, we needed to have a partially transparent background button with rounded corners, and with gradient border. We need to get it in our Design System, to think about a React Native solution. I know this article is long, but it includes the links to all the resources I read, the solutions I discarded, a link to the Figma file containing the gradient border, and a Codepen where you can play with it.

If you follow me: this article is quite different compared to the high-level, senior-oriented articles I usually write (here is the full list of them) 🙏 but I needed to write it down to be sure it helps other developers in the future.

---

I had to implement a new variant of the Preply button for our internal Design System: a semi-transparent button with a gradient-rounded border.

The existing solutions

There are some solutions out there but we needed to discard most of them because they do not match the following requirements:

1. The button must be transparent: this prevents us from using the most common solution presented in the How To Make a Button with a Gradient Border and Gradient Text in HTML & CSS post. The solution presented here relies on two elements, with a pseudo-element that has the same background color as the page background covering the real element that has a gradient background.
2. The button must be half transparent: the solution presented on StackOverflow's Button gradient borders with transparent background does not work since it gives a false idea of transparency and fits just one possible background.
3. It must have wider browser support: using engine-only CSS properties like -webkit-mask as suggested in Border with gradient and radius does not work well for us.
4. It must have rounded corners: this discards using CSS border-image (here is a good CSS Tricks article about it) since it's not compatible with border-radius.

More:

• it should have a fallback for the browsers that do not support the gradient border.
• the border should not be a raster image to avoid pixelation.
• It should be supported by React Native too: more on this topic will follow, forget about it for now.

The viable solution

The last mentioned one, border-image, in reality, meets all the requirements if mixed with a couple of tricks:

1. We can use an SVG instead or a raster image: pixelation is not a problem anymore.
2. It's widely supported: at the time of writing, Can I use reports 96.62% (95.43% if unprefixed) browser usage compatibility.

1. Through border-image-slice: stretch we can define the portions that should scale when the button gets bigger (the sides) and the ones that should not (the corners).
2. We can use an SVG that includes rounded corners to simulate the final rounded corners.
3. We can work around the few bugs reported by Can I use easily (we simply need to use the shorthand syntax) and they do not impact border-image-slice: stretch.

Step-by-step implementation

Step 1: Creating the SVG in Figma. This is the Figma file containing it.

Essentially, it's a 100x100 rounded square with the desired border. I made it 100x100 to avoid any kind of coordinates-related problem mentioned in the CSS Tricks article.

Step 2: Optimize the SVG. I was looking for the best way to embed the SVG (external or embedded image?) and the CSS Tricks article points to the great Probably Don’t Base64 SVG that, in turn, points to Optimizing SVGs in data URIs. You can leverage the findings from the latter through mini-svg-data-uri. The steps are

1. Reducing the SVG size: easily doable through SVGOMG
2. Passing the result through mini-svg-data-uri: $ npx mini-svg-data-uri image.svg image.svg.uri
3. Copy-pasting the image.svg.uri content

The result is

border-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='none'%3e%3cpath stroke='url(%23a)' stroke-width='2' d='M8 1h84a7 7 0 0 1 7 7v84a7 7 0 0 1-7 7H8a7 7 0 0 1-7-7V8a7 7 0 0 1 7-7Z'/%3e%3cdefs%3e%3clinearGradient id='a' x1='20.27' x2='120.715' y1='125' y2='113.589' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='%23FF7AAC'/%3e%3cstop offset='.367' stop-color='%23FF7AAC'/%3e%3cstop offset='.682' stop-color='%232885FD'/%3e%3cstop offset='1' stop-color='%233DDABE'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e")

Choosing the inline or hosted one leads to a different UX, obviously. When I was playing with the hosted one, I hated that the border came with a little delay because of the time required to load the SVG remotely...

Please note that using mini-svg-data-uri is mandatory, otherwise, the browser does not recognize the SVG. Alternatively, this problem does not happen if you convert the SVG to Base64.

Step 3: Choosing the right border-image-slice and border-image-width values. If you need to do something more complex than the case reported in this guide, please refer to the official documentation (1, and 2) and again to the great CSS Tricks article. But for the sake of this guide, the value for either of them is just 8. Why? Because 8 is the border radius of the button.

If you imagine the border width acting as a sort of "mask" (I highlighted it in yellow in the next images) it must be 8 to be sure it includes the rounder corner. If, instead you set 2 as the real border width, the result is that the "mask" cuts out the rounded corners.

8px	2px

here you can see the final result of using 8 (correct) and 2 (incorrect) as rendered by the browser

So, the code is now

border-image: url("data:image/svg+xml,...") 8 / 8px;

p.s. if you set the border-width to 8 instead of border-image-width, you obtain the same visual effect... but the border is effectively 8 pixels, not 2 pixels like I set for the button! Keep it in mind if there is something wrong and you do not understand why.

Step 4: Choosing the correct border-image-repeat property. It's stretch, as I told you earlier. Essentially, it means "Don't touch the corners but extend the sides to be sure the image covers all the size of the button".

border-image: url("data:image/svg+xml,...") 8 / 8px stretch

Step 5: Enjoy the full code 😊

border-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='none'%3e%3cpath stroke='url(%23a)' stroke-width='2' d='M8 1h84a7 7 0 0 1 7 7v84a7 7 0 0 1-7 7H8a7 7 0 0 1-7-7V8a7 7 0 0 1 7-7Z'/%3e%3cdefs%3e%3clinearGradient id='a' x1='20.27' x2='120.715' y1='125' y2='113.589' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='%23FF7AAC'/%3e%3cstop offset='.367' stop-color='%23FF7AAC'/%3e%3cstop offset='.682' stop-color='%232885FD'/%3e%3cstop offset='1' stop-color='%233DDABE'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e") 8 / 8px stretch;

Browser compatibility

At Preply, we must support a wide range of browsers. By looking at the Can I use table I shared above, it's hard to find a non-supported browser and I can be sure the gradient works everywhere. Anyway, I wanted to double-check it with my eyes and I initially used BrowserStack screenshots to test out the solution quickly on a lot of browsers, but it resulted in a bit of unreliable since it was not able to render most of the screenshots due to internal BrowserStack problems... Anyway, I'm happy because when it was able to render the normal button, it was also able to render the gradient one. Here are some of the screenshots on some "not-so-common" browsers

Samsung Galaxy S20	MacOS / Safari 13	Windows 10 / Edge 18

Fallback

There are for sure some browsers out there that do not support border-image. There are two options here:

1. Using CSS Feature Queries (@supports)

@supports (border-image: url("data:image/svg+xml,...") 8 / 8px stretch;) {
   border-image: url("data:image/svg+xml,...") 8 / 8px stretch;
}

This is the solution that gives you more freedom since you can literally change all the button properties you want outside and inside the @supports block, you are not limited to changing just border-image. Please check the Feature Queries browser compatibility, even if they are almost the same as the one of border-image.

1. Simply choose a fallback border-color. border-image overwrites the border-color, but the browsers not able to interpret border-image will use border-color. Here is an example of Internet Explorer 10.

I opted for the second option because the LESS + PostCSS transpilation process breaks the @supports property and I have not found a solution yet.

React Native

border-image does not work with React Native (which simply renders the normal border color instead) and the app developers pointed me to some different solutions.

1. If the button has a gradient border but does not have a transparent background: they would use a combination of react-native-linear-gradient with an element with an opaque background over it.
2. If the button must also be transparent, also masked-view would be needed.

I reported both cases because adding two dependencies for just one button could be overkill. When the button is added to the app, the app developers will decide what to do based on where the button is used. They will maybe opt for implementing the button in the app codebase instead of the Design System one, to avoid putting too many dependencies on the Design System codebase.

But the button is not used in the app at the time of writing so we have the time to go back to the designers asking what they prefer to do.

Additional notes

1. Don't forget about background: transparent; to make the button transparent, of course 😊.
2. Our Design System System's button already sets it but if the button has a background that's not totally transparent, remember to set the border-radius to 8px too to avoid the background coming out of the rounded borders.

Codepen liknk

You can play with the final result in this Codepen 😊.

Credit where credit is due

Thank you so much to all the creators sharing their solutions and tools! I would have spent maybe ten times the time on this without their explorations! ❤️