Round specific border corner with SwiftUI - swiftui

Question

I am trying to add a border to a view and round the topLeading and topTrailing corner only. It seems extremely difficult to achieve? It's easy enough to just round the corners with this extension:
struct RoundedCorner: Shape {
var radius: CGFloat = .infinity
var corners: UIRectCorner = .allCorners
func path(in rect: CGRect) -> Path {
let path = UIBezierPath(roundedRect: rect, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
return Path(path.cgPath)
}
}
extension View {
func cornerRadius(_ radius: CGFloat, corners: UIRectCorner) -> some View {
clipShape( RoundedCorner(radius: radius, corners: corners) )
}
}
But this does not work when you apply a stroke. Any ideas how to achieve this?

Answer 1

The common way to add a border to a view in SwiftUI is via the .overlay() modifier. Using the RoundedCorner shape you've already made, we can modify this answer to create a new modifier that'll both round the shape and add a border.
struct RoundedCorner: Shape {
var radius: CGFloat = .infinity
var corners: UIRectCorner = .allCorners
func path(in rect: CGRect) -> Path {
let path = UIBezierPath(roundedRect: rect, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
return Path(path.cgPath)
}
}
extension View {
public func borderRadius<S>(_ content: S, width: CGFloat = 1, cornerRadius: CGFloat, corners: UIRectCorner) -> some View where S : ShapeStyle {
let roundedRect = RoundedCorner(radius: cornerRadius, corners: [.topLeft, .topRight])
return clipShape(roundedRect)
.overlay(roundedRect.stroke(content, lineWidth: width))
}
}
Usage:
Color.yellow
.borderRadius(Color.red, width: 15, cornerRadius: 25, corners: [.topLeft, .topRight])
.padding()
.frame(width: 300, height: 150)