How to Give UIView Rounded Corners in iOS

How to Give UIView Rounded Corners in iOS

28 February 2025 Stephan Petzl Leave a comment Xcode

Creating a visually appealing user interface often involves adding aesthetic touches, such as rounded corners on UI elements. If you’re looking to round the corners of a UIView in your iOS application, this guide will walk you through the various methods you can use, ensuring you achieve the desired look with ease.

Method 1: Using Layer Properties in Code

This is the most straightforward method, allowing you to programmatically set rounded corners using the cornerRadius property of a view’s layer.

#import <QuartzCore/QuartzCore.h> // not necessary for 10 years now :)

view.layer.cornerRadius = 5;
view.layer.masksToBounds = true;

Note: Apply these changes in viewDidLoad to ensure the view is fully instantiated.

Method 2: Interface Builder with User Defined Runtime Attributes

You can also configure rounded corners directly in Interface Builder by setting the layer.cornerRadius key path in the User Defined Runtime Attributes section. This method does not allow you to see the effect at design time, as it is evaluated at runtime.

Method 3: Swift Extension for UIView

If you prefer a more reusable approach, consider using a Swift extension. This allows you to add rounded corners using an inspectable property directly in Interface Builder.

extension UIView {
    @IBInspectable var cornerRadius: CGFloat {
        get {
            return layer.cornerRadius
        }
        set {
            layer.cornerRadius = newValue
            layer.masksToBounds = newValue > 0
        }
    }
}

Additional Considerations

When working with rounded corners, ensure that masksToBounds or clipsToBounds is set to true to prevent subviews from rendering outside the bounds of the parent view. Larger corner radius values result in more rounded corners, while smaller values keep them subtle.

Enhancing Your Testing with Repeato

When developing iOS applications, testing UI changes such as rounded corners is crucial to ensure a consistent and appealing user experience. Repeato, a no-code test automation tool, can significantly streamline this process. By leveraging computer vision and AI, Repeato allows you to record UI tests quickly, making it easy to verify visual changes like rounded corners across different devices and screen sizes. Its support for data-driven testing ensures that your UI behaves as expected under various conditions, making it a practical choice for developers looking to enhance their testing workflow. For more details, check out our documentation.

Check it out!

Like this article? there’s more where that came from!

Repeato

Documentation

Support

Legal

Repeato Reviews