Add Rounded Corners and Border to UIWebview

Beyond simply displaying websites, UIWebview can be a nice alternative when you need to display formatted text, not to mention the option of incorporating JavaScript which presents some very interesting scripting and UI opportunities. I’ve found webviews handy for presenting help information, displaying HTML downloaded from remote servers as well as integrating custom ad banners from open source ad servers such as Openx.

This tip shows how to add rounded corners and a colored border to a UIWebview, which adds a nice touch to an otherwise squared-off look.

Rounded Corners on UIWebview

What follows is an example of a webview that displays HTML from a file in the application bundle. The trick is to access the CALayer of the view and set the corner radius as well as the border width and color:

// This is required in order to access the CALayer properties
#import <QuartzCore/QuartzCore.h>
 
// Create UIWebview
UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectMake(5, 20, 310, 220)];
 
// Round corners using CALayer property
[[webView layer] setCornerRadius:10];
[webView setClipsToBounds:YES];
 
// Create colored border using CALayer property
[[webView layer] setBorderColor:
   [[UIColor colorWithRed:0.52 green:0.09 blue:0.07 alpha:1] CGColor]];
[[webView layer] setBorderWidth:2.75];
 
[[self view] addSubview:webView];
 
...
 
[webView release];

Note, cornerRadius and borderColor became available with the release of iPhone OS 3.0.