CODEWITHSUNDEEP
iosuiwebviewmobile-safaricss
MaxGabriel
MaxGabriel

Reputation: 7707

CSS border-radius and -webkit-border-radius not working on iOS 5 UIWebView

I'm working on some CSS being used in a UIWebView in iOS. I'm able to round the corners of a div in iOS 6 using the border-radius property, but I can't replicate the effect in iOS 5.1 using either border-radius or -webkit-border-radius properties. Is there a workaround, or am I doing something wrong? Here's the CSS.

#ad-wrapper {
  postion:absolute;
  top:50%;
  left:50%;
  margin-left:-140px;
  margin-top:-109px;
  width:280px;
  height:218px;
  position:absolute;
  overflow:hidden;
  -webkit-border-radius:12px;
  border-radius:12px;
}

which works for iOS 6:

iOS 6 border radius works

but not for iOS 5.1:

iOS 5.1 border radius doesn't work

I'm brand new to web development (having done mostly native iOS before this), so any help is appreciated.

Upvotes: 0

Views: 2318

Answers (1)

MaxGabriel
MaxGabriel

Reputation: 7707

For iOS 5, I was able to fix it by applying -webkit-border-bottom-left-radius, bottom-right-radius, etc. to the correct sub elements.

I'd still like a better fix, as just using the single corner radius in one place is a much cleaner solution, but I may have to settle for this.

Upvotes: 1

Related Questions