Transparent Border styling is weird
Attached is my component. It has the following css properties
It is a border box (made border box default across everything in another css file). I wanted an effect where a transparent border would be on top of the image to make the object feel 3D. But for some reason the bottom border has some other style that confuses me. I am guessing it has something to do with the default browser styling. But Idk. Thanks
16 Replies
Looks like it's blending with something underneath
Maybe the background is showing underneath
I have asked in other places. It fixes some things when I add
50% 50% / 100% 100% no-repeat
to the end of the radial gradient. However doing so causes more issues. I want my border to be on top of the background and transparent. And adding the line results in the border not being placed on top of the gradient.Image of doing so. With a more transparent border
And you get some weird sharp corner issues. If you look at the bottom left of the image.
You could try using a psuedo element and absolute positioning it over the card
That feels a bit hacky
In figma it works perfectly
Well it's figma. Not an exact representation of what the browser will render
They're using a canvas and custom rendering
Yeh, but it is what I am going for. Something like it where the border is just a subtle outline around the background
Hmm, I dont see anything wrong with your implementation. Maybe try removing the radial gradient temporarily to see
Is the card just a div?,
yeh
I think it is partially due to the background image not covering the whole div
Yeah it's probably that
when using
url('../../../assets/tree.jpg') darkblue center center / cover no-repeat;
How can I make the image fll the whole space?Did some modifications. Removed the line in my last message.
It isn't just an issue with the background image
Ended up creating a pseudo element and placing it on top of my component
Thanks