Introduction

Grouped table view cells in iOS look different from plain table cells because the system applies inset, grouped styling around each section. If you want custom background or border colors, the most reliable approach is usually to provide your own background view or container view rather than trying to fight the default grouped rendering directly.

Understand Which View You Are Styling

A UITableViewCell has several relevant layers of appearance:

• 'contentView'
• 'backgroundView'
• 'selectedBackgroundView'
• the cell's own background color

In grouped tables, system styling can make direct background-color changes look incomplete or inconsistent. That is why custom background views are often cleaner.

A Custom Background View Pattern

1import UIKit
2
3class CustomCell: UITableViewCell {
4    private let roundedBackground = UIView()
5
6    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
7        super.init(style: style, reuseIdentifier: reuseIdentifier)
8
9        roundedBackground.backgroundColor = .systemBlue
10        roundedBackground.layer.cornerRadius = 12
11        roundedBackground.layer.borderWidth = 1
12        roundedBackground.layer.borderColor = UIColor.systemIndigo.cgColor
13
14        backgroundColor = .clear
15        contentView.backgroundColor = .clear
16        backgroundView = roundedBackground
17    }
18
19    override func layoutSubviews() {
20        super.layoutSubviews()
21        let inset: CGFloat = 12
22        roundedBackground.frame = bounds.insetBy(dx: inset, dy: 4)
23    }
24
25    required init?(coder: NSCoder) {
26        fatalError("init(coder:) has not been implemented")
27    }
28}

This works because you fully control the view responsible for the visible background and border.

Why contentView.backgroundColor Alone Is Often Not Enough

If you only set contentView.backgroundColor, the grouped table's surrounding visual treatment may still show through around the edges. That can make the result look wrong, especially if you want rounded corners or a custom border.

Using backgroundView gives you a cleaner surface to style independently from the cell's internal content layout.

Handling Selection Separately

If you want a different appearance while the row is selected, use selectedBackgroundView.

1let selected = UIView()
2selected.backgroundColor = UIColor.systemBlue.withAlphaComponent(0.2)
3selected.layer.cornerRadius = 12
4cell.selectedBackgroundView = selected

Without this, the system selection color may clash with your custom background and border choices.

Modern Insets and Section Layout

Grouped tables often look best when the custom background is inset horizontally and vertically. That gives the section its card-like appearance.

The background view should usually:

• have clear outer cell background
• be inset slightly from the cell bounds
• round corners if you want grouped card styling
• use a border color that still looks correct in selected and unselected states

If you need different corner masks for top, middle, and bottom rows in a section, compute that based on the index path and apply corner rounding conditionally.

Auto Layout Alternative

Instead of using backgroundView, some teams place a styled container inside contentView and constrain it. That can be easier when the custom background needs shadows, internal padding, or additional decorative subviews.

The underlying idea is the same: provide your own view for the visible styled surface.

Common Pitfalls

The biggest mistake is trying to fight the grouped appearance by changing only cell.backgroundColor and expecting full control.

Another mistake is forgetting selection styling, which lets the system overlay an unwanted highlight on top of your custom look.

A third issue is not accounting for cell reuse. If styling changes depend on row position in the section, update them every time the cell is configured.

Finally, if you round corners, make sure the visible background view is the one being rounded, not just the cell's outer layer that may still be obscured by grouped layout behavior.

Summary

• For grouped table cells, custom background or border styling is most reliable through backgroundView or a custom container view.
• 'contentView.backgroundColor alone is often not enough for grouped appearance customization.'
• Use selectedBackgroundView to control selected-state styling separately.
• Inset the styled surface to match grouped or card-like layouts.
• Update styling during reuse if row position affects borders or corner rounding.
• The key is to own the visible surface instead of fighting the default grouped rendering.