Introduction

Rounded images are a common design requirement for avatars, cards, and gallery layouts. The implementation is simple once you know where to apply it, but many bugs come from doing it too early in the layout cycle or expecting a global switch that UIKit does not provide.

The Basic Layer Settings

Rounded corners on a UIImageView come from its backing layer. In practice, you need two settings:

• 'layer.cornerRadius to define the curve'
• 'clipsToBounds or layer.masksToBounds to keep the image inside that shape'

let imageView = UIImageView(image: UIImage(named: "avatar"))
imageView.layer.cornerRadius = 12
imageView.clipsToBounds = true

That works for a fixed radius, but it only gives the correct result if the view already has its final size. If Auto Layout changes the bounds later, the radius may be wrong.

Apply the Radius After Layout

For circles or size-dependent corners, update the radius in layoutSubviews() or viewDidLayoutSubviews(), not in viewDidLoad().

1final class ProfileViewController: UIViewController {
2    @IBOutlet private weak var avatarView: UIImageView!
3
4    override func viewDidLayoutSubviews() {
5        super.viewDidLayoutSubviews()
6
7        avatarView.layer.cornerRadius = avatarView.bounds.height / 2
8        avatarView.clipsToBounds = true
9    }
10}

Using bounds.height / 2 creates a circle when the image view is square. For a card image with soft corners, use a fixed value such as 12 or 16.

If You Mean Every Image View on a Screen

There is no built-in UIKit setting that automatically rounds every UIImageView in the entire app. If you need to update every image view inside one screen or container, walk the view hierarchy and style the matching views.

1import UIKit
2
3func roundImageViews(in root: UIView, radius: CGFloat) {
4    for subview in root.subviews {
5        if let imageView = subview as? UIImageView {
6            imageView.layer.cornerRadius = radius
7            imageView.clipsToBounds = true
8        }
9
10        roundImageViews(in: subview, radius: radius)
11    }
12}
13
14final class GalleryViewController: UIViewController {
15    override func viewDidLayoutSubviews() {
16        super.viewDidLayoutSubviews()
17        roundImageViews(in: view, radius: 10)
18    }
19}

This approach is useful when you are cleaning up an existing screen and do not want to replace every outlet. It is less ideal as a long-term pattern because it applies one visual rule to everything it finds.

If You Mean Every Image View You Create Going Forward

The cleaner solution is usually a subclass. A subclass makes the style explicit, works in Interface Builder, and avoids surprising unrelated image views.

1import UIKit
2
3@IBDesignable
4final class RoundedImageView: UIImageView {
5    @IBInspectable var cornerRadius: CGFloat = 12
6    @IBInspectable var makesCircle: Bool = false
7
8    override func layoutSubviews() {
9        super.layoutSubviews()
10
11        if makesCircle {
12            layer.cornerRadius = bounds.height / 2
13        } else {
14            layer.cornerRadius = cornerRadius
15        }
16
17        clipsToBounds = true
18    }
19}

Now you can assign RoundedImageView in Interface Builder or create it in code. That gives you a reusable component instead of a one-off visual fix.

A Note About Borders and Shadows

Borders work well with rounded images because they are also layer properties:

1imageView.layer.cornerRadius = 14
2imageView.layer.borderWidth = 2
3imageView.layer.borderColor = UIColor.white.cgColor
4imageView.clipsToBounds = true

Shadows are different. If you set clipsToBounds = true, the shadow is clipped away. The usual solution is to put the UIImageView inside a container view. Apply the corner radius to the image view and the shadow to the container.

That separation keeps the image masked while still letting the outer shadow render correctly.

Choosing the Right Pattern

Use the simplest option that matches the scope of the problem:

• one image view: set the layer directly
• many image views in one screen: traverse the hierarchy or style them in a helper
• repeated app-wide design pattern: create a subclass

Trying to force a global rule onto plain UIImageView instances usually creates maintenance problems. A named subclass is easier to reason about and makes the design intent obvious to other developers.

Common Pitfalls

• Setting cornerRadius before Auto Layout has produced the final bounds, which leads to the wrong shape.
• Forgetting clipsToBounds or layer.masksToBounds, so the image still draws past the rounded edge.
• Expecting UIImageView.appearance() to solve this globally, even though the relevant properties live on the layer.
• Using a circular radius on a non-square image view and wondering why the result looks oval or clipped.
• Applying shadows directly to the same view that clips its content, which hides the shadow.

Summary

• Rounded corners on UIImageView come from layer.cornerRadius plus clipping.
• Apply size-dependent radii after layout, not in viewDidLoad().
• For existing screens, you can walk the view hierarchy and style every image view you find.
• For long-term reuse, a RoundedImageView subclass is the cleaner solution.
• Put shadows on a container view when the image itself needs clipping.