How do I create a round cornered UILabel on the iPhone?

Question

Is there a built in way to create round-cornered UILabels? If the answer is no, how would one go about creating such an object?

Solution 1

iOS 3.0 and later

iPhone OS 3.0 and later supports the cornerRadius property on the CALayer class. Every view has a CALayer instance that you can manipulate. This means you can get rounded corners in one line:

view.layer.cornerRadius = 8;

You will need to #import <QuartzCore/QuartzCore.h> and link to the QuartzCore framework to get access to CALayer's headers and properties.

Before iOS 3.0

One way to do it, which I used recently, is to create a UIView subclass which simply draws a rounded rectangle, and then make the UILabel or, in my case, UITextView, a subview inside of it. Specifically:

1. Create a UIView subclass and name it something like RoundRectView.
2. In RoundRectView's drawRect: method, draw a path around the bounds of the view using Core Graphics calls like CGContextAddLineToPoint() for the edges and and CGContextAddArcToPoint() for the rounded corners.
3. Create a UILabel instance and make it a subview of the RoundRectView.
4. Set the frame of the label to be a few pixels inset of the RoundRectView's bounds. (For example, label.frame = CGRectInset(roundRectView.bounds, 8, 8);)

You can place the RoundRectView on a view using Interface Builder if you create a generic UIView and then change its class using the inspector. You won't see the rectangle until you compile and run your app, but at least you'll be able to place the subview and connect it to outlets or actions if needed.

Solution 2

For devices with iOS 7.1 or later, you need to add:

yourUILabel.layer.masksToBounds = YES;
yourUILabel.layer.cornerRadius = 8.0;

Solution 3

For Swift IOS8 onwards based on OScarsWyck answer:

yourUILabel.layer.masksToBounds = true
yourUILabel.layer.cornerRadius = 8.0

Solution 4

1. you have an UILabel called: myLabel.
2. in your "m" or "h" file import: #import <QuartzCore/QuartzCore.h>

3. in your viewDidLoad write this line: self.myLabel.layer.cornerRadius = 8;

   • depends on how you want you can change cornerRadius value from 8 to other number :)

Good luck

Solution 5

You can make rounded border with width of border of any control in this way:-

CALayer * l1 = [lblName layer];
[l1 setMasksToBounds:YES];
[l1 setCornerRadius:5.0];

// You can even add a border
[l1 setBorderWidth:5.0];
[l1 setBorderColor:[[UIColor darkGrayColor] CGColor]];

Just replace lblName with your UILabel.

Note:- Don't forget to import <QuartzCore/QuartzCore.h>

View more solutions

Comments

[Zac Bowling]

view.layer.cornerRadius still draws the entire view (offscreen instead when it's enabled) and only at the CoreAnimation layer will it clip your view. The cost is that it will make putting any view with it enabled in a UIScrollView, kill your scrolling performance.

[benzado]

Using cornerRadius inside a UIScrollView will kill your scrolling performance? I might believe you if we're talking about a UITableView, but a single rounded-corner view isn't going to grind the view drawing system to a halt.

[Chris Vasselli]

If you want to do this in Interface Builder instead of code, you can set a User Defined Runtime Attribute with key path "layer.cornerRadius" in the Identity Inspector.

[Aaron Zinman]

Set the corner radius but masksToBounds is slow for scrolling/animation. If you set the layer's background color vs the view that's enough in conjunction with the layer's cornerRadius on 7.1 (where it would have stopped working with only cornerRadius).

[mluisbrown]

Please don't clutter up Stack Overflow with translations of Objective-C answers into Swift, particularly when the only change in this case is changing YES to true.

[CKP78]

The change in this case is minimal, but as a general point translations from Objective-C into Swift are often very useful.

[Marián Černý]

How about editing the original answer and adding Swift translation there?