How do you do rounded corners with CSS on the iPhone in a UIWebView?

Question

Doesn't seem to work for me, maybe I just doing it wrong

Answer 1

The answer is yes it works, I was doing it wrong :). If you want rounded corners in a UIWebView (or even in a regular web page that people might view on the iPhone Safari), you can do this:

div { -webkit-border-radius: 10px;}

If you just want to do specific corners, you can do this

div { -webkit-border-top-right-radius: 10px;}

Answer 2

In case anybody might be looking for a way of rounding IMAGE corners in UIWebView it is doable, but you have to put the image as a background image. It took me a few hours to figure this one out, so glad if this helps anybody out there.

@"<div style=\"background-color: #ccc; 
               background-image:url('*http:// or file:/// with your image*'); 
               -webkit-border-radius: 5px; 
               border: 1px solid #ccc; 
               margin-top:0px; 
               margin-left:0px; 
               height:150px; 
               width:280px;\">";

P.S. I wanted to comment on the answer above, but it seems I need to have more karma to do that :)