How to Set Corner Radius for Top-Left and Top-Right Corners of a UIView

How to Set Corner Radius for Top-Left and Top-Right Corners of a UIView

6 June 2024 Stephan Petzl Leave a comment Tech-Help

Customizing the corner radius of a UIView can significantly enhance the visual appeal of your iOS applications. However, achieving this for specific corners, such as only the top-left and top-right, can sometimes be challenging. This guide will walk you through various methods to set the corner radius for only the top-left and top-right corners of a UIView.

Using UIBezierPath and CAShapeLayer

One of the most reliable ways to round specific corners of a UIView is by using a combination of UIBezierPath and CAShapeLayer. This method involves creating a custom path and applying it as a mask to the view’s layer. Below is a step-by-step example:


UIView *view = [[UIView alloc] initWithFrame:frame];
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:view.bounds
                                              byRoundingCorners:(UIRectCornerTopLeft | UIRectCornerTopRight)
                                                    cornerRadii:CGSizeMake(20.0, 20.0)];
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.frame = view.bounds;
maskLayer.path = maskPath.CGPath;
view.layer.mask = maskLayer;


let path = UIBezierPath(roundedRect: view.bounds, 
                        byRoundingCorners: [.topRight, .topLeft], 
                        cornerRadii: CGSize(width: 20, height: 20))
let maskLayer = CAShapeLayer()
maskLayer.path = path.cgPath
view.layer.mask = maskLayer

Using CACornerMask in iOS 11+

For iOS 11 and later, Apple introduced CACornerMask, which simplifies the process of rounding specific corners. This method is straightforward and requires less code compared to the UIBezierPath method.

Swift Example

let view = UIView()
view.clipsToBounds = true
view.layer.cornerRadius = 10
view.layer.maskedCorners = [.layerMaxXMinYCorner, .layerMinXMinYCorner] // Top right and top left corners

Handling Auto Layout

If your UIView is using Auto Layout, you need to ensure the corner radius is applied after the view’s layout is finalized. This can be achieved by overriding the layoutSubviews method.

Swift Example

class CustomView: UIView {
    override func layoutSubviews() {
        roundCorners(corners: [.topLeft, .topRight], radius: 10.0)
    func roundCorners(corners: UIRectCorner, radius: CGFloat) {
        let path = UIBezierPath(roundedRect: bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
        let mask = CAShapeLayer()
        mask.path = path.cgPath
        layer.mask = mask


Setting the corner radius for specific corners of a UIView can be done using different methods, each with its advantages. For older iOS versions, combining UIBezierPath and CAShapeLayer is a robust solution. For iOS 11 and later, CACornerMask offers a simpler and more efficient approach.

In addition to enhancing the UI, ensuring your app is thoroughly tested is crucial. This is where Repeato comes into play. Repeato is a no-code test automation tool for iOS and Android, making it easy to create, run, and maintain automated tests for your mobile apps. With its fast editing and execution capabilities based on computer vision and AI, Repeato allows developers to focus on building great products while enabling non-technical colleagues to handle test automation.

For more information on using Repeato, check out our Getting Started Guide or visit our Blog for the latest updates.

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