Skip to main content
.cornerRadius(radius: number)
​
radius
number
required
The corner radius in points.

​
Support

​
Usage

​
Round a card

VStack([
    Text("Card Title").font("headline"),
    Text("Card content goes here.")
])
    .padding(16)
    .background(Color("white"))
    .cornerRadius(12)

​
Round an image

Image({ url: "photo.jpg" })
    .resizable()
    .frame({ width: 100, height: 100 })
    .cornerRadius(8)

​
Pill shape with large radius

Text("Tag")
    .padding({ leading: 16, trailing: 16, top: 8, bottom: 8 })
    .background(Color("blue"))
    .foregroundStyle(Color("white"))
    .cornerRadius(20)

​
Notes

cornerRadius clips the content at the corners. For more control over the clipping shape, use clipShape with a RoundedRectangle.

​
See Also