Swift
iOS
NSAttributedString
text styling
rounded corners

NSAttributedString background color and rounded corners

Master System Design with Codemia

Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.

Introduction

NSAttributedString can apply a background color to text, but it cannot directly express rounded corners as a built-in text attribute. That distinction matters because many developers expect the background attribute to behave like a rounded tag or pill. If you need rounded corners, you usually have to custom-draw the background or use a different UI composition strategy.

What the Background Attribute Actually Does

The .backgroundColor text attribute paints a rectangular background behind glyph runs. It does not know anything about corner radius.

swift
1import UIKit
2
3let text = NSMutableAttributedString(string: "Highlighted text")
4text.addAttribute(
5    .backgroundColor,
6    value: UIColor.systemYellow,
7    range: NSRange(location: 0, length: text.length)
8)

This works for simple highlighting, but the background is effectively square. There is no standard attributed-string key such as "cornerRadius" that text rendering engines honor automatically.

Use a Custom View When You Need a Rounded Tag

If the goal is a pill-shaped label or badge, the simplest solution is often not NSAttributedString at all. A padded UILabel or custom view is easier to maintain.

swift
1import UIKit
2
3final class TagLabel: UILabel {
4    var textInsets = UIEdgeInsets(top: 6, left: 10, bottom: 6, right: 10)
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}
18
19let label = TagLabel()
20label.text = "Swift"
21label.backgroundColor = .systemYellow
22label.layer.cornerRadius = 10
23label.layer.masksToBounds = true

If the entire label needs one rounded background, this approach is usually better than forcing the problem into text attributes.

Use Text Layout APIs for Partial Rounded Highlights

If you must round the background behind only part of an attributed string, you need custom drawing based on the text layout. One approach is to use NSLayoutManager, find the glyph bounding rect for the target range, and draw a rounded rectangle before drawing the text.

That is more advanced, but it matches the actual rendering model: first compute layout, then draw the custom background shape, then draw the attributed text on top.

A Practical Drawing Pattern

The basic flow is:

  1. build the attributed string
  2. compute the rect for the highlighted range
  3. draw a UIBezierPath rounded rect in that area
  4. draw the text

The exact implementation depends on whether you are drawing in UILabel, UITextView, or a custom Core Text or TextKit view. The important point is that rounded corners come from your drawing code, not from a built-in string attribute.

When to Avoid Custom Text Drawing

Custom drawing is powerful, but it increases complexity around multiline layout, dynamic type, selection, and accessibility. If the visual requirement is really a chip, badge, or token, separate views are often better than partial attributed text styling.

That tradeoff matters most when the highlighted text wraps across lines. A nice single-line rounded shape can become a much harder layout problem once the text spans multiple fragments.

Common Pitfalls

  • Expecting .backgroundColor on NSAttributedString to support rounded corners directly.
  • Building a complex custom text renderer when a rounded UILabel would solve the actual UI need.
  • Forgetting that partial highlights may span multiple line fragments.
  • Trying to solve a view-layer problem only with attributed-string keys.
  • Overlooking accessibility and dynamic type when custom-drawing text backgrounds.

Summary

  • 'NSAttributedString supports background color, but not rounded-corner background styling as a native attribute.'
  • For full-label rounded backgrounds, a padded UILabel or custom view is usually simpler.
  • For rounded highlights on part of a string, use custom drawing based on text layout.
  • Multiline and accessibility concerns make custom rendering more complex than it first appears.
  • Choose between text attributes and separate UI views based on the real visual requirement.

Course illustration
Course illustration

All Rights Reserved.