Grow your CSS skills. Land your dream job.

Border Radius in iPad

  • # March 5, 2013 at 6:32 am

    I’ve never had this problem before but in a recent design the border-radius isn’t working in iPad. I have no idea why!!!

    Here is the CSS:

    .article-date {
    background: #F3F3F3;
    width: 70px;
    height: 70px;
    padding: 19px 0;
    text-align: center;
    border-radius: 35px;
    -moz-border-radius: 35px;
    -webkit-border-radius: 35px;
    color: #999;
    font-size: 0.8em;
    }

    (I’ve also got * { box-sizing: border-box; } on all elements).

    On iPad the result in no rounded borders and no padding.

    I searched Google and iPad doesn’t have any problems with border-radius as far as I could determine.

    Am I just missing something really stupid?!

    # March 5, 2013 at 6:50 am

    I can’t think of any reason why it should matter but is the unprefixed border-radius property listed after all of the prefixed versions?

    # March 5, 2013 at 3:45 pm

    I tried it on iPhone (should be same browser as iPad) and it works fine for me really. Got an example online?

    # March 7, 2013 at 3:15 pm

    Thanks Paulie_D and Senff,

    I tried re-ordering the selectors but it’s still displaying as a square in iPad (latest iPad model). Here you can see the round dates on the home page:

    http://www.nicehair.org/

    but in iPad they are square. Strange that it works on iPhone but not iPad. If anyone has an iPad so that they can verify that I have not gone crazy I would be grateful!

    Thanks for your help

    # March 16, 2013 at 11:31 am

    hey, check out [www.teet.be](www.teet.be “www.teet.be”) on your latest iPad and PC, i have the same problem i think…

    # March 16, 2013 at 11:33 am

    sorry, previous link wasn’t correct, i hope this one will do: [www.teet.be](http://www.teet.be “www.teet.be”)

    # March 16, 2013 at 2:07 pm

    @teet: this is a different issue since you try to use rounded corners on an image, which is a known problem in various browsers.

    @chrisjb: As for Nicehair.org: I’m thinking it might have something to do with the media query. You’ve set the breakpoint at exactly 768 pixels (if lower than that, don’t use rounded corners) and I think it’s not taking it well. Check the layout on an iPad and on a browser that has a 768 width, it’s different.

    Things you might want to try:

    Add this line in your header, or experiment with some of those values:

    Or, instead of max-width in your media query, use max-device-width.

    Maybe that’ll get you on the right path.

    # June 19, 2013 at 11:27 am

    I’ve got round circles working on my older ipad (non-retina) but the page is not live anywhere yet. Maybe using percentages or ems might help?

    CSS I use:

    `
    icon{
    border: 2px solid #FFFFFF;
    background: #231D6C;
    **border-radius: 50% 50% 50% 50%;**
    height: 3em;
    width: 3em;
    position: absolute;
    left: 0;
    top: 0;
    }
    `

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

You must be logged in to reply to this topic.

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