SwiftUI: Ways to create Rounded Corner + make specific corner radius

In my entire life as a developer, I’ve never seen a button is used as it is. RoundedCorner is applied almost 99.99%. Otherwise, the UI looks too stiff. Today, let’s look at two ways to make a rounded corner in SwiftUI and how to apply a rounded corner only to a specific part.

Using CornerRadius Modifier

cornerRadius modifier

This is probably the most used way to create corner radius. Nothing special about it. But be cautious, in SwiftUI, sequence matters. It means, you have to apply background first and after that apply .cornerRadius. Otherwise, it won’t work.

Using ClipShape Modifier

with clipShape

This is the second most used method as I know of. Attach modifier clipShape with RoundedRectangle(). Mostly use it with .continuous style.

Apply Specific CornerRadius

Extension

I created a shape named RoundedCorners and extension to apply it easily. By using this extension, you can add corner radius to specific parts. This is really useful. Save the code and use it in your project!

Conclusion

1. Use cornerRadius() modifier
2. Use RoundedRectangle() with .clipShape() modifier
3. Copy & Paste extension and apply specific corner radius