Forums
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
There is a workaround here. It uses box-shadow to create a generic border element. Should work until a bug fix is made.
img {
border-radius: 5px;
box-shadow: 0px 0px 0px 1px green;
}
Just jumpin’ on the hack train. I noticed a similar effect happening when I tried to have an element fade in and out with opacity. Much to my surprise when opacity hit 1 Chrome would no longer clip the edges of content within my container. So, I hacked my way around it by setting opacity to 0.99999.
{
opacity: 1
}
Children bleed around rounded border.
{
opacity: 0.99999
}
Children will no longer bleed around rounded border.
Ugly, but it works.
I was having a similar issue with hover states on elements with a border-radius wrapper.
The following applied to the parent element with the border radius applied to kick webkit back into line for me:
-webkit-mask-image: -webkit-radial-gradient(white, black);
Still hacky but will suffice until they sort this out – interested to hear other solutions.
So, this is a really old thread, but I’m coming here to report that I don’t see the issue anymore with a simple border-radius on Chrome or FF, so it’s all good now! The passage of time fixed it :)