Hi there, is it possible to create a border gradient with a border-radius and a transparent background? This is a good tutorial to create a border gradient including border-radius. However it is not possible to set a transparent background. Is there any workaround to use a border gradient with a t…

The third version shown should work and the support isn’t that bad. You can also use a combination of 1 and 2 but instead of a pseudo-element you use a wrapper element with the radius and a hidden overflow. It probably has some limitations and would be more finicky to set up. <div class="radius"> …

I want to make the background transparent and for the border I want to use a gradient color. When using a gradient color for the border then we need to set a background color on top of it. Just like in the tutorial I showed, but my question is, if there is a workaround use a gradient color for the b…

Thank you again and again @lasjorg :smiley: I highly appreciate your support!

How to make a CSS border gradient with transparent background?

Programming HTML-CSS

bappyasif November 17, 2022, 12:48pm 2

if you want to make border look “transparent” then why use “border”?!

Topic		Replies	Views
Just want the border to have colors HTML-CSS	8	92	January 16, 2026
Removing the middle of the background, keeping only the border HTML-CSS	8	916	February 3, 2022
How to create transparent gradient blur around transparent blurred div? HTML-CSS	27	4841	February 20, 2025
HELP: White to Transperant linear gradient background	3	573	June 1, 2021
Background-color to transparent HTML-CSS	4	21123	March 9, 2021

How to make a CSS border gradient with transparent background?

Related topics