Skip to main content
.clipShape(shape: Shape)
​
shape
Shape
required
The shape to clip to. Common shapes include Circle(), Capsule(), RoundedRectangle(cornerRadius), Rectangle(), and Ellipse().

​
Support

​
Usage

​
Clip an image to a circle

Image({ url: "avatar.jpg" })
    .resizable()
    .frame({ width: 64, height: 64 })
    .clipShape(Circle())

​
Clip to a rounded rectangle

Image({ url: "photo.jpg" })
    .resizable()
    .frame({ width: 200, height: 150 })
    .clipShape(RoundedRectangle(16))

​
Clip to a capsule

Text("Tag")
    .padding({ leading: 12, trailing: 12, top: 6, bottom: 6 })
    .background(Color("blue"))
    .foregroundStyle(Color("white"))
    .clipShape(Capsule())

​
Notes

clipShape clips both the visual content and the hit-testing area. To change only the hit-testing shape without clipping visuals, use contentShape.

​
See Also