Grow your CSS skills. Land your dream job.

Chrome -webkit-border-radius bug?

  • # October 18, 2012 at 12:39 am

    The following style for anchor tag should get you through:

    border: 4px solid #5882B4;
    height: 125px;
    display: block;
    width: 290px;
    overflow: hidden;
    border-radius: 20px;

    Remove the border from image.

    # January 9, 2013 at 8:27 pm

    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;
    }

    # March 11, 2013 at 7:09 am

    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.

    # November 17, 2013 at 7:27 pm

    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.

    # December 14, 2013 at 9:49 am

    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 :)

Viewing 5 posts - 16 through 20 (of 20 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".