Grow your CSS skills. Land your dream job.

Inconsistency on border radius on images across browsers and systems?

  • z_x
    # September 25, 2012 at 8:57 am

    I’ve spotted some weird behavior across browsers border-radius implementation. Take this code: http://jsfiddle.net/pm7FZ/1/ On Windows every browser excerpt Chrome rounds inner image: http://imgur.com/54In8 Chrome doesn’t and the image stays square.

    I don’t have OS X, but my friend send me this: http://img.skitch.com/20120925-eypjk593tdest3ud9hcji1sauf.png Seems it behaves differently. Although another friend says that if you set border-radius to 20px on OS X it will round the image corners on OS X’s version of Firefox.

    Question – what is happening here? Why so much inconsistency.

    It’s obviously easy to “fix”, just curiosity.

    # September 25, 2012 at 10:09 am

    I seem to recall that border radius on images does not work on Chrome.

    I believe that a wrapping element ( I use a ‘figure’ Chrome) is required but even that required exact dimensions.

    z_x
    # September 25, 2012 at 11:11 am

    You can ’round’ pure image by border-radius in Chrome without a problem. That’s not the thing here.

    # September 25, 2012 at 11:26 am

    You are right but to get what you are after you need the wrapping element (div/figure)

    http://codepen.io/Paulie-D/pen/Eikoz

    Of course my example depends on knowing the image dimensions. I suspect someone cleverer than me could ‘automate’ it.

    # September 25, 2012 at 11:56 am

    Here’s an alternative (cleaner) option I found with a quick google search: http://codepen.io/Paulie-D/pen/DBfpe

    z_x
    # September 25, 2012 at 12:58 pm

    It’s not hard to achieve this. I’m just curious what’s behind those different implementations.

    # September 25, 2012 at 1:58 pm

    Different companies have different interpretations of a spec that isn’t set in stone.

    z_x
    # September 26, 2012 at 10:19 am

    So, shouldn’t the spec be more specific? Is there a place where could I post this to get it to the spec?

    I mean – it should follow the road where we don’t need to think about those differences, just code and get the same result following the guidelines.

    # September 26, 2012 at 10:32 am

    Sure is: http://www.w3.org/Style/CSS/current-work.en.html

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

You must be logged in to reply to this topic.

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