In this quick post we are going to look at how we can make views in SwiftUI have rounded corners. You can round the corners of any SwiftUI view by using the cornerRadius() modifier. Simply add a value to the cornerRadius to control how rounded you want the view to be. Let us look at a simple example below.
struct ContentView: View {
@State private var hovering = false
var body: some View {
Button(action: {}) {
Text("Button")
}
.buttonStyle(PlainButtonStyle())
.padding()
.background(Color.green)
.cornerRadius(10)
}
}
By adding a cornerRadius of 10 to our button we now get nice rounded corners on our button. This can be used on any view that you want to manipulate the corners to have rounded edges.
Hope this helps in styling your views in SwiftUI!
Why does this not work in a widget extension?
As far as I know you need to use ContainerRelativeShape when working in widgets. Here’s a article to help you to add rounded corners to widgets https://dev.to/yuki0n0/apply-containerrelativeshape-only-to-specific-corners-swiftui-1a72. Soon I’m going to post about how to implement widgets in SwiftUI and will cover rounded corners in that.
Thanks Tom. I know and i also tried this ContainerRelativeShape. It works in SwiftUI in the main app ok.
But when you try this inside a widget extension View
Image(“camera”)
.clipShape(ContainerRelativeShape())
it won’t work.Yet you can create a rounded view around a text or Rectangle in the widget. But it just won’t work on images.
I wonder how the NewsAppWidget does this. It shows 50×50 sized preview images of news headlines with rounded corners…