Forums

Give help. Get help.

  • # 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: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:36 pm

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

    # 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: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: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.

    # December 17, 2012 at 9:51 pm

    @joshuanhibbert I’m glad you said > I would highly recommend that you avoid the use of extra markup for styling purposes. Yes, it’s not a good practice and I’ll avoid it.
    @chrisburton, I thought the same thing and cleared my cache – but maybe I just need to do it again. Will do.

    Thanks so much everyone.

    # December 19, 2012 at 5:55 am

    @Bluej:


    -webkit-border-radius:5px;
    # December 21, 2012 at 12:09 pm

    It’s a regression in Chrome. Works fine for me in Stable and dev build, but in Canary the corners are not rendering properly. Things break often in Canary but are fixed before moving to stable. I’m on mountain lion, mac, retina.

    # December 21, 2012 at 12:18 pm

    This is how it looks when I added all of Chris’s prefixes on Chrome 23.0

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag