Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Rounded corners not working in Chrome

  • This topic is empty.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #41407
    Bluej
    Member

    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.

    (https://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%;
    }
    #117836
    matt_sanford
    Participant

    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.

    #117837
    matt_sanford
    Participant

    That is how i got it to work.

    #117841
    TheDoc
    Member

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

    #117842
    David_Leitch
    Participant

    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/hdsIDhttp://codepen.io/David_Leitch/pen/hdsID”) what I was experimenting with.

    #117844
    Bluej
    Member

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

    #117846
    Bluej
    Member

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

    #117853
    David_Leitch
    Participant

    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

    #117856
    David_Leitch
    Participant

    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

    #117860
    chrisburton
    Participant

    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.

    #117861
    Bluej
    Member

    @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.

    #118064
    dhiruSingh
    Member

    @Bluej:


    -webkit-border-radius:5px;
    #118429
    heavymark
    Participant

    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.

    #118432
    Watson90
    Member

    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)
  • The forum ‘CSS’ is closed to new topics and replies.