iOS development
UIImage
UIImageView
rounded corners
Swift programming

IOS create a UIImage or UIImageView with rounded corners

Master System Design with Codemia

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

Introduction

Rounded image corners are a small UI detail, but they show up constantly in real iOS apps. Profile photos, cards, avatars, and thumbnails all look cleaner when the corner treatment matches the rest of the design. In Swift, the correct approach depends on whether you only need a rounded UIImageView on screen or you need a new UIImage whose pixels are already clipped.

If the image is only being displayed, round the UIImageView layer. If you need to export, cache, or reuse the rounded result elsewhere, render a new UIImage with a clipped drawing context.

Round a UIImageView With Layer Properties

For display-only use cases, UIImageView is the easiest place to do the work. Set the layer's corner radius and enable clipping.

swift
1import UIKit
2
3let imageView = UIImageView(image: UIImage(named: "avatar"))
4imageView.contentMode = .scaleAspectFill
5imageView.layer.cornerRadius = 16
6imageView.clipsToBounds = true

That is usually enough for fixed-radius rounded corners. contentMode = .scaleAspectFill is common for avatars because it fills the frame without distorting the image.

If you want a circle instead of a fixed radius, calculate the radius from the view size:

swift
1override func viewDidLayoutSubviews() {
2    super.viewDidLayoutSubviews()
3    avatarImageView.layer.cornerRadius = avatarImageView.bounds.width / 2
4    avatarImageView.clipsToBounds = true
5}

Doing this in viewDidLayoutSubviews matters because the view must have its final size before you derive a circular radius from the bounds.

Round Only Specific Corners

Sometimes the design wants only the top corners or only the bottom corners rounded. On modern iOS, maskedCorners gives you a clean layer-based solution.

swift
1import UIKit
2
3cardImageView.layer.cornerRadius = 20
4cardImageView.layer.maskedCorners = [
5    .layerMinXMinYCorner,
6    .layerMaxXMinYCorner
7]
8cardImageView.clipsToBounds = true

This keeps the code simple and avoids drawing a brand-new image when the goal is only a view presentation effect.

If you need to support more custom masking behavior, a CAShapeLayer mask is another option, but it is usually unnecessary for ordinary rounded-corner image views.

Create a New UIImage With Rounded Pixels

Sometimes the display trick is not enough. You may want a rounded image that you can cache, upload, or reuse in other drawing operations. In that case, create a new image with UIGraphicsImageRenderer.

swift
1import UIKit
2
3func roundedImage(from image: UIImage, cornerRadius: CGFloat) -> UIImage {
4    let renderer = UIGraphicsImageRenderer(size: image.size)
5
6    return renderer.image { _ in
7        let rect = CGRect(origin: .zero, size: image.size)
8        let path = UIBezierPath(roundedRect: rect, cornerRadius: cornerRadius)
9        path.addClip()
10        image.draw(in: rect)
11    }
12}

Usage is straightforward:

swift
1if let original = UIImage(named: "avatar") {
2    let rounded = roundedImage(from: original, cornerRadius: 24)
3    imageView.image = rounded
4}

This approach modifies the actual rendered pixels, not just the visual container.

Choose the Right Technique

A good rule of thumb is:

  • use UIImageView.layer.cornerRadius for UI presentation
  • use a rendered UIImage when the rounded result must live independently of the view
  • use a circular radius based on bounds when building avatars

Layer rounding is cheaper to write and easier to maintain in view code. Rendering a new image is better when you need the rounded output as an asset-like value.

Watch Layout and Reuse Behavior

Rounded images often appear in table-view and collection-view cells, where timing matters. If the view size changes after you set the radius, the result may look wrong until the next layout pass.

For reusable views, update the radius after the cell has the correct bounds. If you are building circular avatars, avoid hardcoding the radius unless the size is truly fixed.

You should also remember that clipsToBounds = true affects subviews. That is fine for most image views, but it matters if you later add shadows or overlay content that should extend beyond the bounds.

Common Pitfalls

The most common mistake is setting a circular corner radius before Auto Layout has assigned the final frame. In that case, bounds.width / 2 is wrong or even zero.

Another issue is confusing a rounded UIImageView with a rounded UIImage. The first changes presentation. The second changes rendered image content.

A third problem is enabling clipping on a view that is also expected to show a shadow. Shadows are drawn outside the bounds, so clipping can hide the effect.

Summary

  • Use layer.cornerRadius and clipsToBounds for the simplest rounded UIImageView.
  • Calculate the radius from bounds when you want a circular avatar.
  • Use maskedCorners when only specific corners should be rounded.
  • Render a new UIImage with UIGraphicsImageRenderer when you need rounded pixels, not just rounded presentation.
  • Apply size-dependent radius logic after layout so the geometry is correct.

Course illustration
Course illustration

All Rights Reserved.