How to create rounded images in SwiftUI

Creating rounded images in your app’s UI can be a design choice to enhance the visual appeal and provide a more modern or aesthetically pleasing look. Rounded images are commonly used in various scenarios, including user profile pictures, avatar icons, buttons, or any other elements where a circular or rounded appearance is desired.

There are several ways to create rounded images in SwiftUI, depending on the shape and border you want. Here are some possible methods:

Using cornerRadius modifier

The cornerRadius() modifier clips a view to its bounding frame with the specified corner radius, can be used to create rounded corners for any view. It accepts a CGFloat value as the radius of the corners. It also has an antialiased parameter that controls whether the edges of the mask are smoothed or not.

Image("avatar")
  .resizable()
  .aspectRatio(contentMode: .fill)
  .frame(width: 150, height: 150)
  .cornerRadius(20)

However, this modifier has been deprecated. This means that it is no longer recommended to use it, and it may be removed or changed in future versions of SwiftUI. The reason for the deprecation is that it does not respect the safe area insets of the view, which can cause unwanted clipping or overlapping of the view’s content.

Using clipShape modifier

An alternative solution is using the clipShape() modifier, which allows you to clip a view to any shape you want, such as a circle, a rounded rectangle, a capsule, etc.

This modifier respects the safe area insets of the view, and it also supports antialiasing, which can improve the appearance of the clipped edges.

Image("avatar")
  .resizable()
  .aspectRatio(contentMode: .fill)
  .frame(width: 150, height: 150)
  .clipShape(RoundedRectangle(cornerRadius: 20))

Both modifiers will clip the content of the view to match the shape of the mask, but they may have different effects on the view’s layout and alignment.

Rounded corners with border

The overlay() modifier in SwiftUI is a view modifier that layers the views that you specify in front of this view. You can use it to create various effects, such as adding borders, shadows, badges, or other decorations to your views.

To add a border to an image, you can use the overlay modifier with a shape and a stroke.

Image("avatar")
  .resizable()
  .aspectRatio(contentMode: .fill)
  .frame(width: 150, height: 150)
  .clipShape(RoundedRectangle(cornerRadius: 20))
  .overlay {
    RoundedRectangle(cornerRadius: 20)
      .stroke(.white, lineWidth: 3)
  }

The overlay modifier takes two parameters: alignment and content. The alignment parameter specifies where to position the implicit ZStack that groups the foreground views. The default is center. The content parameter is a view builder that you use to declare the views to draw in front of this view, stacked in the order that you list them. The last view that you list appears at the front of the stack.

You can also apply modifiers to the overlay views, such as resizing, coloring, offsetting, etc. You can also use more than one overlay modifier on the same view, to create different layers of overlays.