Fix: Rounded Corners Not Showing on UIView in Swift

Why this happens

Setting layer.cornerRadius on a UIView tells Core Animation to round the corners of the view’s primary backing layer. However, developers frequently find that their view continues to display hard, square 90-degree corners. This issue stems from three common causes in UIKit.

First, UIView.clipsToBounds defaults to false. While the parent view’s background layer might have rounded corners, any subviews—such as a UIImageView, a child UIView, or an inner UILabel—will render past the curved boundary if clipping is turned off. Because these child layers draw over the edges of the parent layer, the corners look completely unrounded.

Second, developers often configure geometry-dependent corner radii inside initialization methods or viewDidLoad. If you calculate a circular corner radius using view.bounds.width / 2 before Auto Layout runs, bounds.width is usually 0 or reflects placeholder storyboard dimensions. The corner radius evaluates to an unintended value and never updates once the view resizes.

Third, when setting rounded corners in Interface Builder (XIBs or Storyboards) via User Defined Runtime Attributes, changes do not visually render on the Xcode canvas at design time. Additionally, developers frequently configure the layer.cornerRadius key path in Interface Builder but forget to check the “Clip to Bounds” checkbox in the Attributes Inspector.

How to fix it

1. Enable clipsToBounds Alongside layer.cornerRadius

The standard solution in Swift code requires setting both the corner radius value and clipping on the target view. In UIKit, view.clipsToBounds and view.layer.masksToBounds control the same underlying layer property.

import UIKit

class LoginCardView: UIView {
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupCorners()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupCorners()
    }

    private func setupCorners() {
        // Define the radius
        layer.cornerRadius = 12.0

        // Clip subviews to prevent them from drawing outside the curved border
        clipsToBounds = true

        // Optional: Use modern continuous Apple-style corner curves
        layer.cornerCurve = .continuous
    }
}

Setting layer.cornerCurve = .continuous matches the rounded rectangle curvature used across iOS system alerts, app icons, and control centers.

2. Configure Rounded Corners in Interface Builder

If you prefer configuring views inside Storyboards or .xib files without writing subclass boilerplate, use User Defined Runtime Attributes combined with the Attributes Inspector:

1. Open your storyboard or .xib file in Xcode.
2. Select the view you want to round.
3. Open the Attributes Inspector (right sidebar) and check the Clip to Bounds checkbox.
4. Open the Identity Inspector.
5. Under the User Defined Runtime Attributes section, click the + button to add an entry:
   – Key Path: layer.cornerRadius
   – Type: Number
   – Value: 12 (or your chosen radius)

Note that Interface Builder evaluates these attributes at runtime. The canvas will continue showing square corners unless you mark your custom view class with the @IBDesignable attribute.

3. Round Specific Corners Using CACornerMask

If you only need certain corners rounded (such as the top edges of a bottom sheet or modal card), use layer.maskedCorners instead of creating complex shape layers or bezier paths:

import UIKit

class BottomSheetView: UIView {
    override func awakeFromNib() {
        super.awakeFromNib()

        layer.cornerRadius = 20.0
        clipsToBounds = true
        layer.cornerCurve = .continuous

        // Round only the top-left and top-right corners
        layer.maskedCorners = [
            .layerMinXMinYCorner, // Top-left
            .layerMaxXMinYCorner  // Top-right
        ]
    }
}

The available corner flags are:
– .layerMinXMinYCorner: Top-left
– .layerMaxXMinYCorner: Top-right
– .layerMinXMaxYCorner: Bottom-left
– .layerMaxXMaxYCorner: Bottom-right

4. Recalculate Circular Views in layoutSubviews

For elements that must remain perfectly circular—like profile pictures or circular badges—setting a static radius in viewDidLoad fails if the view’s size adapts across different screen widths.

Place radius calculations inside layoutSubviews() (for custom views) or viewDidLayoutSubviews() (for view controllers):

import UIKit

class AvatarImageView: UIImageView {
    override func layoutSubviews() {
        super.layoutSubviews()

        // Ensure the radius dynamically follows the current computed bounds
        layer.cornerRadius = bounds.width / 2.0
        clipsToBounds = true
    }
}

This ensures that whenever Auto Layout updates the view’s frame, the corner radius recalculates accurately.

How to prevent it

• Always pair radius with clipping: Form the habit of writing clipsToBounds = true immediately after setting layer.cornerRadius whenever the view contains subviews or displays an image.
• Avoid frame calculations in viewDidLoad: Never calculate a corner radius based on view.bounds or view.frame inside viewDidLoad or init, because Auto Layout has not resolved final dimensions yet.
• Do not configure layer.borderColor via IB Runtime Attributes: Interface Builder runtime attributes cannot map a UIColor to a Core Graphics CGColor. Set borders programmatically in Swift instead.
• Separate drop shadows from clipped views: If you need both a drop shadow and rounded corners, do not enable clipsToBounds on the shadow-casting view. Use a container view for the shadow and place a clipped rounded view inside it.

FAQ

What is the difference between clipsToBounds and layer.masksToBounds?

clipsToBounds is a UIKit property on UIView, while masksToBounds is the underlying Core Animation property on CALayer. In Swift on iOS, toggling view.clipsToBounds directly modifies view.layer.masksToBounds, so they produce identical runtime results.

How can I apply rounded corners and a drop shadow at the same time?

Setting clipsToBounds = true clips everything outside the view bounds, including shadows cast by layer.shadowOpacity. To solve this, apply the shadow properties to an unclipped outer container view, and place your rounded, clipped content view inside that container.

Why does layer.cornerRadius cause performance drops in table or collection views?

Rounding corners with clipsToBounds = true triggers offscreen rendering in Core Animation, which can cause frame drops during fast scrolling. For optimized lists containing many images, consider pre-rendering rounded images using UIGraphicsImageRenderer rather than masking layers in real time.