How do I create a round cornered UILabel on the iPhone?
Master System Design with Codemia
Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.
Introduction
Creating a round-cornered UILabel is mostly a matter of configuring the view's backing layer. The part that confuses people is not the radius itself, but making sure the rounded shape is actually visible when the label is laid out, clipped, and given a background color.
Basic Rounded Corners
For a normal rounded rectangle, set cornerRadius on the label's layer and enable clipping:
clipsToBounds = true is what prevents the label's background from drawing outside the rounded shape. Without it, the corner radius may be set but the visible result can still look square.
Why the Label Still Looks Square Sometimes
Rounded corners only show up if there is something to see at the edges. If the label has no background color, you are only drawing text, and the corner radius has almost no visible effect.
That is why most examples also set:
- '
backgroundColor' - '
clipsToBoundsorlayer.masksToBounds' - enough height and padding to make the shape noticeable
The label's frame matters too. A height of 20 points with a radius of 12 will look very different from a height of 60 points with the same radius.
Making a Pill-Shaped Label
If you want a fully rounded pill shape, set the radius to half the final height. The safest place to do that is after layout, when the label has its real size.
This is useful when Auto Layout determines the height. If you set the radius too early, such as in viewDidLoad, the label may still have a zero-sized frame and the result will be wrong.
Adding Padding
UILabel does not have built-in text insets, so a rounded background can look cramped unless you add padding. A common solution is to subclass UILabel and inset the drawing rect.
Padding is often the difference between "technically rounded" and a label that actually looks good in production UI.
Interface Builder Option
If the label comes from a storyboard or XIB, you can still round it in code, typically in viewDidLayoutSubviews or an outlet configuration method. The mechanism is the same because every UILabel is still backed by a Core Animation layer.
The main reason to keep this in code is that the radius often depends on the final height, which is easier to compute after Auto Layout finishes.
Common Pitfalls
- Setting
cornerRadiusbut forgettingclipsToBoundsorlayer.masksToBounds. - Expecting rounded corners to show when the label has no background color.
- Computing a pill radius before Auto Layout has set the final frame.
- Using a standard label with no padding, which makes the text look cramped.
- Hard-coding a radius that looks fine for one size class and wrong for another.
Summary
- Rounded
UILabelcorners come from the view's layer, not from a special label API. - Set
layer.cornerRadiusand enable clipping to make the shape visible. - Use a background color so the rounded corners can actually be seen.
- For pill-shaped labels, compute the radius from the final height after layout.
- Add padding with a subclass if you want the rounded label to look polished.

