swift
uilabel
corner-radius
ios-development
swiftui

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:

swift
1import UIKit
2
3let label = UILabel()
4label.text = "Hello"
5label.backgroundColor = .systemBlue
6label.textColor = .white
7label.textAlignment = .center
8label.frame = CGRect(x: 40, y: 100, width: 120, height: 40)
9
10label.layer.cornerRadius = 8
11label.layer.masksToBounds = true

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.

swift
label.layer.cornerRadius = 8
label.clipsToBounds = true

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.

swift
label.frame = CGRect(x: 40, y: 100, width: 140, height: 36)
label.layer.cornerRadius = label.frame.height / 2
label.clipsToBounds = true

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:

swift
1import UIKit
2
3class ViewController: UIViewController {
4    @IBOutlet weak var statusLabel: UILabel!
5
6    override func viewDidLayoutSubviews() {
7        super.viewDidLayoutSubviews()
8
9        statusLabel.layer.cornerRadius = statusLabel.bounds.height / 2
10        statusLabel.clipsToBounds = true
11    }
12}

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.

swift
1label.layer.cornerRadius = 10
2label.layer.borderWidth = 1
3label.layer.borderColor = UIColor.systemBlue.cgColor
4label.clipsToBounds = true

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.

swift
1import UIKit
2
3class PaddingLabel: UILabel {
4    var textInsets = UIEdgeInsets(top: 6, left: 12, bottom: 6, right: 12)
5
6    override func drawText(in rect: CGRect) {
7        super.drawText(in: rect.inset(by: textInsets))
8    }
9
10    override var intrinsicContentSize: CGSize {
11        let size = super.intrinsicContentSize
12        return CGSize(
13            width: size.width + textInsets.left + textInsets.right,
14            height: size.height + textInsets.top + textInsets.bottom
15        )
16    }
17}

Then:

swift
1let label = PaddingLabel()
2label.text = "Badge"
3label.backgroundColor = .systemGreen
4label.layer.cornerRadius = 16
5label.clipsToBounds = true

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:

swift
1import SwiftUI
2
3struct BadgeView: View {
4    var body: some View {
5        Text("Hello")
6            .padding(.horizontal, 12)
7            .padding(.vertical, 6)
8            .background(Color.blue)
9            .foregroundColor(.white)
10            .clipShape(Capsule())
11    }
12}

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.cornerRadius plus clipsToBounds to round a UILabel.
  • 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 UILabel styling and SwiftUI Text styling as separate techniques.

Course illustration
Course illustration

All Rights Reserved.