Round Specific Corners in iOS 17 & SwiftUI 5 using UnevenRoundedRectangle
Before the release of iOS 17 & SwiftUI 5, rounding specific corners for shapes required custom solutions but starting SwiftUI 5, Apple introduced a new shape called UnevenRoundedRectangle.
The UnevenRoundedRectangle takes radii of each corner of the rounded rectangle to round each corner independent of each other. Shape is created with zero as the corner radius for all corners. It takes topLeadingRadius, bottomLeadingRadius, bottomTrailingRadius and topTrailingRadius as parameter so we can set each corner with a CGFloat value.
Let’s look at this with an example.
struct UnevenRectExample: View {
var body: some View {
UnevenRoundedRectangle(topLeadingRadius: 20, bottomLeadingRadius: 0, bottomTrailingRadius: 20, topTrailingRadius: 0)
.foregroundStyle(.orange.gradient)
.frame(height: 200)
.overlay(Text("DevTechie.com").font(.largeTitle))
.padding()
}
}
The UnevenRoundedRectangle also takes RectangleCornerRadii as a parameter so we can create a shape by passing an instance of RectangleCornerRadii as well.
