Add Rounded Corners and Border to UIWebview
June 21, 2010
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.