Border Radius in iPad

[chrisjb]

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?!

[Paulie_D]

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?

[Senff]

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

[chrisjb]

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

[teet]

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…

[teet]

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

[Senff]

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

[slwf]

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

[Author]

Posts