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.
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:
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.
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.
Usage is straightforward:
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.cornerRadiusfor UI presentation - use a rendered
UIImagewhen 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.cornerRadiusandclipsToBoundsfor the simplest roundedUIImageView. - Calculate the radius from
boundswhen you want a circular avatar. - Use
maskedCornerswhen only specific corners should be rounded. - Render a new
UIImagewithUIGraphicsImageRendererwhen you need rounded pixels, not just rounded presentation. - Apply size-dependent radius logic after layout so the geometry is correct.

