Bleeding background on border-radius
How can I prevent bleeding background on bottom corners?
https://codepen.io/solracss/pen/oNQOJRp?editors=1100
Already tried
- overflow: hidden
- background-clip: padding-box;
Only solution that works for me atm is to set different size of border, but's a dirty hack imo.
4 Replies
Increasing the border radius also works, making sure the background (white) element has a greater radius. Since you are already using a variable doing something like
calc(var(--border-radius) * 2) works and is quite easy to understand.
Mmmh it looks like this is not as easy as I thought as the bottom corners must be explicitly set separately.
But it will work. Another solution that may not be suitable depending on what you need to do, is adding position relative to the content (black) element and displace it by 1 pixel:
setting a -1px
margin on .content also works.
The trade off is whether you can accept content being a few px wider (one left, one right) than bcg.
I had to up the offset (either Joao's solution, or just setting a negative margin-bottom and nothing else on content) to 5px to get all the bleed to go away on my screen
depending on your background, one or the other might be less noticableOk, but I want to keep oryginal sizes and border.
You can set background of bgc to a linear gradient
background: linear-gradient(white 50%, transparent 0);
This will make half background transparent so you wont see this bleeding effect. This part is behind this dark gray box anyway so you wont really know that half is transparent