Forums

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

Home Forums CSS Inconsistency on border radius on images across browsers and systems?

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #40005
    z_x
    Member

    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: https://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.

    #110751
    Paulie_D
    Member

    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.

    #110753
    z_x
    Member

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

    #110755
    Paulie_D
    Member

    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.

    #110759
    Paulie_D
    Member

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

    #110764
    z_x
    Member

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

    #110771
    TheDoc
    Member

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

    #110820
    z_x
    Member

    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.

    #110821
    Paulie_D
    Member
Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.