iOS Development
Swift Programming
UIView Tutorial
iOS UI Design
Mobile App Development

Round two corners in UIView

Interview Questions practice on Codemia

Over 8,000 real interview questions from top companies, searchable by company and role.

Browse interview questions

Introduction

Rounding only two corners of a UIView is a common UI requirement for cards, sheets, and custom controls. The implementation depends on your iOS version and whether the view’s size is already known when you apply the rounding. The safest solution is to choose the right API and run it after layout has established the final bounds.

Use maskedCorners on Modern iOS

On iOS 11 and later, CALayer supports selecting specific corners directly.

swift
1import UIKit
2
3final class RoundedViewController: UIViewController {
4    @IBOutlet private weak var panelView: UIView!
5
6    override func viewDidLayoutSubviews() {
7        super.viewDidLayoutSubviews()
8
9        panelView.layer.cornerRadius = 16
10        panelView.layer.maskedCorners = [
11            .layerMinXMinYCorner,
12            .layerMaxXMinYCorner
13        ]
14        panelView.layer.masksToBounds = true
15    }
16}

The example above rounds the top-left and top-right corners. This is the simplest approach when your deployment target supports it.

Useful corner constants:

  • '.layerMinXMinYCorner'
  • '.layerMaxXMinYCorner'
  • '.layerMinXMaxYCorner'
  • '.layerMaxXMaxYCorner'

Why Layout Timing Matters

If you apply corner rounding too early, the view may still have .zero bounds or an outdated frame. That produces incorrect masks.

Good places to apply the effect:

  • 'viewDidLayoutSubviews in a view controller'
  • 'layoutSubviews in a custom view subclass'

Bad place:

  • 'viewDidLoad when layout has not yet finalized size'

If your view changes size after rotation or Auto Layout updates, rerun the corner logic when layout changes.

Create a Reusable UIView Extension

If you do this in several screens, move the logic into an extension.

swift
1import UIKit
2
3extension UIView {
4    func roundCorners(_ corners: CACornerMask, radius: CGFloat) {
5        layer.cornerRadius = radius
6        layer.maskedCorners = corners
7        layer.masksToBounds = true
8    }
9}

Usage:

swift
1cardView.roundCorners(
2    [.layerMinXMinYCorner, .layerMaxXMinYCorner],
3    radius: 20
4)

This keeps view controllers cleaner and makes corner style easier to standardize.

Use a Shape Mask for Older iOS or Special Cases

If you need compatibility with older systems or more complex path control, use UIBezierPath with CAShapeLayer.

swift
1import UIKit
2
3final class LegacyRoundedView: UIView {
4    override func layoutSubviews() {
5        super.layoutSubviews()
6
7        let path = UIBezierPath(
8            roundedRect: bounds,
9            byRoundingCorners: [.topLeft, .topRight],
10            cornerRadii: CGSize(width: 16, height: 16)
11        )
12
13        let maskLayer = CAShapeLayer()
14        maskLayer.path = path.cgPath
15        layer.mask = maskLayer
16    }
17}

This method works well when you need precise path-based masking, but it is slightly more verbose than maskedCorners.

Shadows and Rounded Corners Need Separate Layers

If you want both rounded corners and shadows, setting masksToBounds = true on the same layer will clip the shadow. The standard fix is to separate them:

  • outer container handles the shadow
  • inner content view handles rounded corners
swift
1shadowContainer.layer.shadowColor = UIColor.black.cgColor
2shadowContainer.layer.shadowOpacity = 0.2
3shadowContainer.layer.shadowRadius = 8
4shadowContainer.layer.shadowOffset = CGSize(width: 0, height: 4)
5
6contentView.layer.cornerRadius = 16
7contentView.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]
8contentView.layer.masksToBounds = true

This pattern avoids clipped shadows and is common in production UI code.

Interface Builder and Dynamic Layout

Interface Builder can set uniform corner radius easily, but selected-corner rounding usually still needs code. If your layout is driven by Auto Layout, always assume the final size may differ from the storyboard preview and apply the rounding after layout.

For reusable components, custom views are usually better than repeating view-controller code.

Performance Notes

Corner rounding is not usually expensive on its own, but repeated mask recreation in scrolling views can add overhead. If the view bounds do not change often, avoid rebuilding the shape mask unnecessarily.

A simple guard in layoutSubviews can help:

swift
if layer.cornerRadius != 16 {
    layer.cornerRadius = 16
}

For shape masks, recreate them only when bounds actually change.

Common Pitfalls

One common mistake is applying the corner mask before layout, which uses the wrong bounds.

Another issue is expecting shadows and masked rounded corners to work correctly on the same layer without clipping.

A third mistake is forgetting that resizing the view later may require rebuilding the mask path.

Summary

  • Use layer.maskedCorners and cornerRadius on iOS 11 and later for the simplest selected-corner rounding.
  • Apply the effect after layout so the view has correct bounds.
  • Use a CAShapeLayer mask when you need older compatibility or custom path control.
  • Separate shadow and rounded-corner responsibilities into different layers when needed.
  • Wrap the logic in an extension or custom view when the pattern is reused.

Related reading
Free course
Beginner
7 lessons
2 hours
Tackling System Design Interview Problems

A short course that equips you with the skills to approach system design interviews methodically.

Start the free course
Track what you have practised

A free account saves your progress, solutions and study plan across every problem on Codemia.

Interview Questions practice on Codemia

Over 8,000 real interview questions from top companies, searchable by company and role.

Browse interview questions

All Rights Reserved.