Grow your CSS skills. Land your dream job.

Rounded corners not working in Chrome

  • # December 17, 2012 at 6:15 pm

    Here on this development site (http://mfdev.motivationfactor.com), I’m using Chris Coyer’s tip for putting a transparent border with rounded corners on a div.

    (http://css-tricks.com/transparent-borders-with-background-clip/)

    It looks as desired in Firefox: rounded background, rounded border.

    But in Chrome, the background has square corner that interrupt the border curve.

    Does anyone know how to fix this?

    Thanks

    – – – – -
    Here are the relevant style rules:


    .widget_imperfect_quote h3.widget-title {
    background-clip: padding-box;
    background-color: black;
    border: 3px solid rgba(0, 0, 0, 0.3);
    border-radius: 10px 10px 10px 10px;
    padding: 10px;
    width: 60%;
    }
    # December 17, 2012 at 6:51 pm

    Well you need to add browser prefixes at this time, because non prefixed is more for future proofing (isn’t functional right now). Also, just for the sake of efficiency. saying border-radius: 10px; is the same as saying border-radius: 10px 10px 10px 10px; however is just extra typing. I assume you know that for each value of 10, or whatever number it is, is for each corner of the box. Declaring just browser-radius: 10px tells the browser to keep adding that value to each corner till it runs out.

    # December 17, 2012 at 6:52 pm

    That is how i got it to work.

    # December 17, 2012 at 7:13 pm

    I haven’t checked yet, but this is probably the same media query error?

    # December 17, 2012 at 7:14 pm

    That’s strange, I still can’t get it to work, even when I put every prefix under the sun on them. Any chance you could share the code you used? [Here’s](http://codepen.io/David_Leitch/pen/hdsID “http://codepen.io/David_Leitch/pen/hdsID”) what I was experimenting with.

    # December 17, 2012 at 7:18 pm

    It’s a chrome bug for now. You can get it to work by nesting two elements. It works in Canary so I assume we’ll all see it soon. It’s a webkit thing. I found the bug on their website but accidentally Xed it out.

    # December 17, 2012 at 7:32 pm

    @David_Leitch, thanks, that’s amazing.
    So, if I’m to get it to work by nesting two elements, I could do something like:


    and then style

    .roundborder,
    .round-inner {
    border-radius: 5px;
    }

    # December 17, 2012 at 7:33 pm

    What version of Chrome are you using? It’s working fine for me on 23.0.1271.97 (only using a single element).

    # December 17, 2012 at 7:36 pm

    23.0.1271.97 on a mac
    And the corners of the fill are still square for me.

    # December 17, 2012 at 7:49 pm

    Weird that it’s working fine for me, on OS X and Windows…

    I know that it used to be a transparency issue, but that it’s fixed in the latest versions of Chrome.

    Have you thought about rounding the corners of the element by 1px and using a box-shadow instead? http://jsfiddle.net/joshnh/6WPrC/

    As an aside, I would highly recommend that you avoid the use of extra markup for styling purposes. It isn’t semantic, and it is blurring the lines between content and style.

    # December 17, 2012 at 8:08 pm

    Yeah, I thought it must be a bug if it was still not working with all of those prefixes. Ah well, at least it’s not essential functionality. By the way, I’m using Chrome 23.0.1271.101 on OSX 10.7.5

    Good idea, @joshuanhibbert

    # December 17, 2012 at 8:17 pm

    @David_Leitch No Mountain Lion?

    # December 17, 2012 at 8:34 pm

    I’m but a poor uni student. Maybe Santa will drop it down the chimney for me. To be honest, I just haven’t had the energy to upgrade and if it’s anything like iTunes 11, I’m not going to run towards it hehe

    # December 17, 2012 at 9:20 pm

    OS X upgrades are fairly seamless. It’s not a huge difference, but I like it.

    # December 17, 2012 at 9:25 pm

    It’s working for me now but it wasn’t before.

    @bluej Try clearing your cache first in case you made updates and are just not seeing them.

Viewing 15 posts - 1 through 15 (of 20 total)

You must be logged in to reply to this topic.

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