Skip to main content

How to round the corners of a view

About 2 minSwiftSwiftUIArticle(s)bloghackingwithswift.comcrashcourseswiftswiftuixcodeappstore

How to round the corners of a view 관련

SwiftUI by Example

Back to Home

How to round the corners of a view | SwiftUI by Example

How to round the corners of a view

Updated for Xcode 15

Any SwiftUI view can have its corners rounded using the cornerRadius() modifier. This takes a simple value in points that controls how pronounced the rounding should be.

So, you can create a text view with 15-point rounded corners like this:

Text("Round Me")
    .padding()
    .background(.red)
    .cornerRadius(15)

Download this as an Xcode projectopen in new window

The text “Round Me” in a red rounded rectangle.
The text “Round Me” in a red rounded rectangle.

You can automatically round the shortest edge fully by using the clipShape() modifier with a Capsule, like this:

Text("Round Me")
    .padding()
    .background(.red)
    .clipShape(Capsule())

Download this as an Xcode projectopen in new window

The text “Round Me” in a red capsule or pill shape.
The text “Round Me” in a red capsule or pill shape.
Similar solutions…
SwiftUI tips and tricks | SwiftUI by Example

SwiftUI tips and tricks
How to convert a SwiftUI view to an image | SwiftUI by Example

How to convert a SwiftUI view to an image
How to make a view dismiss itself | SwiftUI by Example

How to make a view dismiss itself
How to create and compose custom views | SwiftUI by Example

How to create and compose custom views
How to add Metal shaders to SwiftUI views using layer effects | SwiftUI by Example

How to add Metal shaders to SwiftUI views using layer effects

이찬희 (MarkiiimarK)
Never Stop Learning.