Round two corners in UIView
Interview Questions practice on Codemia
Over 8,000 real interview questions from top companies, searchable by company and role.
Introduction
Rounding only two corners of a UIView is a common UI requirement for cards, sheets, and custom controls. The implementation depends on your iOS version and whether the view’s size is already known when you apply the rounding. The safest solution is to choose the right API and run it after layout has established the final bounds.
Use maskedCorners on Modern iOS
On iOS 11 and later, CALayer supports selecting specific corners directly.
The example above rounds the top-left and top-right corners. This is the simplest approach when your deployment target supports it.
Useful corner constants:
- '
.layerMinXMinYCorner' - '
.layerMaxXMinYCorner' - '
.layerMinXMaxYCorner' - '
.layerMaxXMaxYCorner'
Why Layout Timing Matters
If you apply corner rounding too early, the view may still have .zero bounds or an outdated frame. That produces incorrect masks.
Good places to apply the effect:
- '
viewDidLayoutSubviewsin a view controller' - '
layoutSubviewsin a custom view subclass'
Bad place:
- '
viewDidLoadwhen layout has not yet finalized size'
If your view changes size after rotation or Auto Layout updates, rerun the corner logic when layout changes.
Create a Reusable UIView Extension
If you do this in several screens, move the logic into an extension.
Usage:
This keeps view controllers cleaner and makes corner style easier to standardize.
Use a Shape Mask for Older iOS or Special Cases
If you need compatibility with older systems or more complex path control, use UIBezierPath with CAShapeLayer.
This method works well when you need precise path-based masking, but it is slightly more verbose than maskedCorners.
Shadows and Rounded Corners Need Separate Layers
If you want both rounded corners and shadows, setting masksToBounds = true on the same layer will clip the shadow. The standard fix is to separate them:
- outer container handles the shadow
- inner content view handles rounded corners
This pattern avoids clipped shadows and is common in production UI code.
Interface Builder and Dynamic Layout
Interface Builder can set uniform corner radius easily, but selected-corner rounding usually still needs code. If your layout is driven by Auto Layout, always assume the final size may differ from the storyboard preview and apply the rounding after layout.
For reusable components, custom views are usually better than repeating view-controller code.
Performance Notes
Corner rounding is not usually expensive on its own, but repeated mask recreation in scrolling views can add overhead. If the view bounds do not change often, avoid rebuilding the shape mask unnecessarily.
A simple guard in layoutSubviews can help:
For shape masks, recreate them only when bounds actually change.
Common Pitfalls
One common mistake is applying the corner mask before layout, which uses the wrong bounds.
Another issue is expecting shadows and masked rounded corners to work correctly on the same layer without clipping.
A third mistake is forgetting that resizing the view later may require rebuilding the mask path.
Summary
- Use
layer.maskedCornersandcornerRadiuson iOS 11 and later for the simplest selected-corner rounding. - Apply the effect after layout so the view has correct bounds.
- Use a
CAShapeLayermask when you need older compatibility or custom path control. - Separate shadow and rounded-corner responsibilities into different layers when needed.
- Wrap the logic in an extension or custom view when the pattern is reused.
Related reading
- Rounded corner for textview in android
- Rounding a double value to x number of decimal places in swift
- Run react-native application on iOS device directly from command line?
- Run/install/debug Android applications over Wi-Fi?
- Run/install/debug Android applications over Wi-Fi?
- Running a Haskell program on the Android OS
- Running a Tensorflow model on Android
- Running multiple AsyncTasks at the same time -- not possible?
.png&w=3840&q=75)
Tackling System Design Interview Problems
A short course that equips you with the skills to approach system design interviews methodically.
Start the free courseTrack what you have practised
A free account saves your progress, solutions and study plan across every problem on Codemia.
Interview Questions practice on Codemia
Over 8,000 real interview questions from top companies, searchable by company and role.