Question:I’m trying to get a white circle that should be razor sharp on the inner edge. I think I have managed at least that. I want the black inner surface to contain the content (preferably almost seamlessly and responsive – if possible). And imagine my template had 10-20 more checkboxes.
But now, the white circle on the outer edge should also look quite sharp (not 100% but much sharper than in my example). So a minimal transition should remain visible on the outer edge (but not on the inner edge). I’ll have to experiment with the thickness of the white circle when I get the CSS right, but I don’t want the white circle to be too thick.
But I can’t manage that somehow…
Which CSS values do I have to specify so that the white circle is sharper on its outer edge and that the black inner surface encloses the content?
Thanks for any effort in advance. 🙂
Answer:Your gradient rules were a bit odd as you went down to 10% from 55%. Really they should be progressively larger. I adjusted to transition from white to black over 2%. Keep fiddling with the values to get it just right.
Have a look at the MDN docs to understand better.
If you have better answer, please add a comment about this, thank you!