iPhone development
UILabel customization
rounded corners
iOS programming
Swift tutorial

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:

swift
1import UIKit
2
3final class ViewController: UIViewController {
4    override func viewDidLoad() {
5        super.viewDidLoad()
6
7        let label = UILabel()
8        label.translatesAutoresizingMaskIntoConstraints = false
9        label.text = "Rounded label"
10        label.textAlignment = .center
11        label.textColor = .white
12        label.backgroundColor = .systemBlue
13        label.layer.cornerRadius = 12
14        label.clipsToBounds = true
15
16        view.addSubview(label)
17
18        NSLayoutConstraint.activate([
19            label.centerXAnchor.constraint(equalTo: view.centerXAnchor),
20            label.centerYAnchor.constraint(equalTo: view.centerYAnchor),
21            label.widthAnchor.constraint(equalToConstant: 180),
22            label.heightAnchor.constraint(equalToConstant: 44)
23        ])
24    }
25}

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'
  • 'clipsToBounds or layer.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.

swift
1import UIKit
2
3final class PillLabel: UILabel {
4    override func layoutSubviews() {
5        super.layoutSubviews()
6        layer.cornerRadius = bounds.height / 2
7        clipsToBounds = true
8    }
9}

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.

swift
1import UIKit
2
3final class PaddedLabel: 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}

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 cornerRadius but forgetting clipsToBounds or layer.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 UILabel corners come from the view's layer, not from a special label API.
  • Set layer.cornerRadius and 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.

Course illustration
Course illustration

All Rights Reserved.