Introduction

Rounding a UIImageView is a very common iOS UI task, but the visual result depends on more than one property. The important combination is setting the layer's cornerRadius and making sure the image content is clipped to that rounded shape.

The Basic Rounded-Corner Setup

For a fixed rounded rectangle, set cornerRadius on the image view's layer and enable clipping.

1import UIKit
2
3final class ProfileViewController: UIViewController {
4    @IBOutlet private weak var avatarImageView: UIImageView!
5
6    override func viewDidLoad() {
7        super.viewDidLoad()
8
9        avatarImageView.layer.cornerRadius = 12
10        avatarImageView.clipsToBounds = true
11    }
12}

Without clipsToBounds, the layer can have rounded edges while the image itself still draws as a square. That is why people often set the radius and then think it "did not work."

Make the Image View Circular

For a circular avatar, the radius should usually be half of the final width. Because Auto Layout may not have assigned the final size during viewDidLoad, calculate the radius after layout.

1import UIKit
2
3final class AvatarViewController: UIViewController {
4    @IBOutlet private weak var avatarImageView: UIImageView!
5
6    override func viewDidLayoutSubviews() {
7        super.viewDidLayoutSubviews()
8
9        avatarImageView.layer.cornerRadius = avatarImageView.bounds.width / 2
10        avatarImageView.clipsToBounds = true
11    }
12}

This is the safest pattern for circular images because it uses the real runtime size, not a guessed constant.

Borders and Content Mode

Borders work naturally on the same layer.

1avatarImageView.layer.cornerRadius = 16
2avatarImageView.layer.borderWidth = 1
3avatarImageView.layer.borderColor = UIColor.systemGray4.cgColor
4avatarImageView.clipsToBounds = true
5avatarImageView.contentMode = .scaleAspectFill

contentMode matters too. Rounded corners can be correct while the image still looks bad if the content is stretched or letterboxed unexpectedly.

Shadows Need a Separate Container

A clipped layer also clips its own shadow. If you want both a rounded image and a visible shadow, use two views:

• an outer container view for the shadow,
• the inner UIImageView for corner radius and clipping.

That separation avoids fighting Core Animation rules.

1containerView.layer.shadowColor = UIColor.black.cgColor
2containerView.layer.shadowOpacity = 0.2
3containerView.layer.shadowRadius = 8
4containerView.layer.shadowOffset = CGSize(width: 0, height: 4)
5
6avatarImageView.layer.cornerRadius = 16
7avatarImageView.clipsToBounds = true

This is a very common pattern for cards, profile headers, and gallery thumbnails.

Reuse in Cells

If the image view appears inside table or collection cells, apply the style in a consistent lifecycle method such as awakeFromNib.

1import UIKit
2
3final class UserCell: UITableViewCell {
4    @IBOutlet private weak var avatarImageView: UIImageView!
5
6    override func awakeFromNib() {
7        super.awakeFromNib()
8        avatarImageView.layer.cornerRadius = 20
9        avatarImageView.clipsToBounds = true
10        avatarImageView.contentMode = .scaleAspectFill
11    }
12
13    override func prepareForReuse() {
14        super.prepareForReuse()
15        avatarImageView.image = nil
16    }
17}

That keeps the presentation consistent even when images load asynchronously during scrolling.

A Small Reusable Helper

If many screens use the same pattern, an extension can keep call sites cleaner.

1import UIKit
2
3extension UIImageView {
4    func applyRoundedCorners(radius: CGFloat) {
5        layer.cornerRadius = radius
6        clipsToBounds = true
7    }
8}

Now you can write avatarImageView.applyRoundedCorners(radius: 12) instead of repeating the same setup code everywhere.

Common Pitfalls

A common mistake is calculating a circular radius too early, before Auto Layout has produced the final size. That leads to an incorrect or non-circular result.

Another issue is forgetting clipsToBounds, which leaves the image content visibly square even though the layer corner radius is set.

Developers also often put shadows and clipping on the same layer, which hides the shadow and makes the styling feel inconsistent.

Summary

• Set layer.cornerRadius to define the rounded shape.
• Use clipsToBounds = true so the image content follows that shape.
• Calculate circular radii after layout so you use the final frame size.
• Keep shadows on a container view instead of on the clipped image view.
• Apply the styling consistently in reusable views to avoid UI drift.