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.

  1. Can you apply this technique to UITableViewCell as well?

  2. It should be available for all classes which inherit from UIView (in 3.x and later) as UIView contains a CALayer property for the view’s Core Animation layer.

  3. Really nice one…thanks for this article…

Comments are closed.