How to round edges of UILabel with Swift
Master System Design with Codemia
Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.
Introduction
Rounding a UILabel in UIKit is usually just a matter of configuring the label’s backing layer. The two properties that matter most are cornerRadius and masksToBounds or clipsToBounds. The only real complication is timing: if the label size comes from Auto Layout, you need to apply fully rounded corners after the label has its final frame.
The Basic UIKit Approach
For a label with a fixed frame or a known size, this is enough:
cornerRadius controls the roundness. masksToBounds = true ensures the label’s background and content are clipped to those rounded corners.
clipsToBounds Versus masksToBounds
For UIView subclasses such as UILabel, clipsToBounds = true is often used instead of setting the layer property directly.
In this context, it is effectively the same intent: make the visible content respect the rounded boundary.
Fully Rounded or Pill-Shaped Labels
If you want a capsule or circular effect, set the corner radius to half the label height.
This works well for badge-style labels such as “NEW,” “PAID,” or “ACTIVE.”
The important condition is that the height must already be known when you calculate the radius.
Auto Layout Timing
If the label size is determined by constraints, do not calculate the corner radius too early in viewDidLoad. The frame may still be zero or incomplete.
A safer place is viewDidLayoutSubviews:
This ensures the label has already been laid out before you compute its final radius.
Add a Border Too
Rounded corners often look better with a matching border.
This is common when the label background is clear and the rounded shape needs to be visually defined.
Padding Matters for Rounded Labels
One issue with UILabel is that it does not have built-in text padding. If you round a label tightly around its text, the corners can feel cramped.
A common solution is to subclass UILabel and add text insets.
Then:
This is often the best solution for badge-like designs.
Interface Builder Option
You can also set rounded corners visually in Interface Builder using user-defined runtime attributes or by wiring the label and configuring it in code. In practice, many teams still prefer code because the rounded-corner logic often depends on the final runtime size.
SwiftUI Note
The title mentions UILabel, which is UIKit. In SwiftUI, you would usually style a Text view differently:
That is a different rendering system, even if the visual goal is similar.
Common Pitfalls
The biggest mistake is setting the corner radius before Auto Layout has given the label a final size. Another is forgetting clipsToBounds or masksToBounds, which means the label still draws as a rectangle. Developers also often build badge-style labels without padding, so the text looks cramped against the rounded edges. Finally, a perfect circle or pill shape only works if the radius is derived from the actual height.
Summary
- Use
layer.cornerRadiusplusclipsToBoundsto round aUILabel. - For pill-shaped labels, use half the label height as the radius.
- Apply dynamic corner radius after layout when Auto Layout controls the size.
- Add padding with a custom label subclass for better badge-style UI.
- Treat UIKit
UILabelstyling and SwiftUITextstyling as separate techniques.

