This tool will let you generate a gradient border that can be applied to block elements without creating any extra elements or pseudo-elements.
Since this just uses multiple backgrounds to create the border, support is very good. The only exception is using the
conic-gradient background, which isn't supported by IE. It also uses
calc to get some of the sizing right, which is almost universally supported.
It just sets the background of the element to the gradient, then covers the middle bit up. If the
border-radius is greater than the
border-width then we also need to make the inner corners curved. This is achieved using a
radial-gradient in each corner.
linear-gradientfor the solid background color?
Because if we use a solid color, we can't set the background size or position. It would cover the whole gradient, instead of just the middle part.
Because we need to pre-calculate the inner background size and corners, we need to stick to pixels which will appear the same on all websites. You might be able to calculate values for other units on your website, but that is beyond the scope of this tool.
This tool covers the middle bit of the gradient to leave just the border. If you need a transparent background, you could probably achieve something by applying the base gradient to a pseudo-element, and using
-webkit-mask to only show the borders. This tool was designed to not create any extra elements though.
The browser will have to generate the gradient for the whole element, and then cover the middle bit up. This might be a little slow for large elements on slower devices, but it probably won't be noticeable for most situations. If you're worried about it, you can easily generate a lighthouse report in Chrome to analyze your site.