Screen Corner Radius Border

I'd like an effect similar to the iOS 18 Siri, with a border/stroke extending around the view including the corner radius of the screen.

This is challenging as "logically" the view is rectangular and those radii don't really exist.

I've seen some posts around the web about _displayCornerRadius which appears to be what would work but it is private and as far as I can tell never mentioned anywhere else.

Does anyone know of a way to achieve a border around a view that correctly wraps around the corners of the rounded screen?

Currently using SwiftUI but open to any solutions.

It would be much clearer if you showed what you mean.

If I understand however, my guess is that you should design some kind of animation, with the final image being the reduced view…

In any case, take care of guidelines:

5.2.5ASR & NR Apple Products: Don’t create an app that appears confusingly similar to an existing Apple product, interface (e.g. Finder), app (such as the App Store, iTunes Store, or Messages)

Apple doesn't publish information on the corner radius of devices. Some older 3rd party frameworks and pods attempted to provide values based on device, but these are best looking guesses, as again, the information is not published. If you need help implementing a similar animated view, please reply with some sort of image or video to confirm we are thinking of the same thing and I can answer questions around implementing a view with a border / stroke extending around the view. There are several ways to achieve this.

Rico
WWDR - DTS - Software Engineer

Here's a super simple example:

struct ContentView: View {
    var body: some View {
        ZStack {
            Text("Hello World")
                .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
        .overlay {
            Rectangle()
                .stroke(Color.blue, lineWidth: 16)
                .ignoresSafeArea(edges: [.bottom])
        }

    }
}

which results in:

The desire was to have an even stroke go along with the lower radius of the device, where now the corners are cut off.

I'm not even wanting it animated, just a border. Think the screen sharing border on most video conferencing apps. The Freeform app has something similar when using certain features in SharePlay, but it has a bottom toolbar so that solves the lower radius issue.

Screen Corner Radius Border
 
 
Q