I'm trying to create a circular div with a gradient border using CSS and I'm facing an issue. I want to display a circle that has a gradient border transitioning from red to blue. However, the gradient border doesn't seem to appear when the parent div has a background color. It seems like the ::before pseudo-element is either hidden or not visible behind the circle. I've provided my HTML and CSS code for reference, and you can check out my live example on CodePen. Any guidance on how to resolve this would be greatly appreciated!
1 Answer
It looks like the problem is related to the z-index. Try setting the z-index of the parent to 0, and the circle's ::before to -1. Also, consider removing the z-index from the circle or setting it to 'auto'. This should help your gradient border show up correctly!
I actually wanted to do something similar but for a custom checkbox with a gradient border on hover. I attempted it but got confused, so I tried pasting my code into ChatGPT for clarity.