#1
  1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2004
    Posts
    996
    Rep Power
    16

    Rounded corners safari issue


    Hi,

    I am trying to use rounded corners for the top left and right of a div in safari, but i cannot work it out.

    This is my code:

    PHP Code:
    -moz-border-radius5px 5px 0px 0px;
    -
    webkit-border-radius5px 5px 0px 0px;
    -
    khtml-border-radius5px 5px 0px 0px;
    border-radius:  5px 5px 0px 0px
    the corners are fine in other browsers, but they appear square in safari. If I change this line to:

    -webkit-border-radius: 5px;

    then the corners are rounded. But how can I get just the top left and top right corners to be rounded?

    Any ideas would be great.

    Thanks
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Which version(s) of Safari are you testing in? It sounds like a limitation of older versions of it that I seem to remember.

    Comments on this post

    • bigsilk agrees : Time to upgrade!
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2004
    Posts
    996
    Rep Power
    16
    I am using v 3.2.1
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2010
    Location
    Brooklyn, NY
    Posts
    57
    Rep Power
    22
    I'm using 5.0.3, and I don't have that problem.

    If you're designing for older browsers, consider that no version of IE except 9 observes rounded corners.

    Just having looked at browser stats here, only about 2% use Safari 4, and am quite sure that Safari 3 users are a microscopic market share. Stats for it don't even show on the site.
  8. #5
  9. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Out of curiosity, is there a particular reason why you're testing in that old version of Safari?

    Anyway, it's a known limitation of Safari 3.x and 4.0.x. There is a solution though. Simply don't use the shortcut property for Webkit browsers:
    Code:
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -khtml-border-radius: 5px 5px 0 0;
    border-radius:  5px 5px 0 0;
    I should mention that Mozilla variants for the properties for the individual corners used a different naming format:
    Code:
      -moz-border-radius-topleft
      -moz-border-radius-topright
      -moz-border-radius-bottomright
      -moz-border-radius-bottomleft
    Originally Posted by bigsilk
    consider that no version of IE except 9 observes rounded corners.
    There are ways to deal with that.
    http://www.dillerdesign.com/experiment/DD_roundies/
    http://css3pie.com/
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo