How to set cornerRadius for only top-left and top-right corner of a UIView

Question

Is there a way to set cornerRadius for only top-left and top-right corner of a UIView   I tried the following  but it end up not seeing the view anymore   UIView  view     UIView alloc  initWithFrame frame    CALayer  layer    CALayer layer   UIBezierPath  shadowPath    UIBezierPath bezierPathWithRoundedRect frame byRoundingCorners  UIRectCornerTopLeft UIRectCornerTopRight  cornerRadii CGSizeMake 3 0  3 0    layer shadowPath   shadowPath CGPath  view layer mask   layer

User · Answer

All of the answers already given are really good and valid (especially Yunus idea of using the mask property).

However I needed something a little more complex because my layer could often change sizes which mean I needed to call that masking logic every time and this was a little bit annoying.

I used swift extensions and computed properties to build a real cornerRadii property which takes care of auto updating the mask when layer is layed out.

This was achieved using Peter Steinberg great Aspects library for swizzling.

Full code is here:

extension CALayer {
  // This will hold the keys for the runtime property associations
  private struct AssociationKey {
    static var CornerRect:Int8 = 1    // for the UIRectCorner argument
    static var CornerRadius:Int8 = 2  // for the radius argument
  }

  // new computed property on CALayer
  // You send the corners you want to round (ex. [.TopLeft, .BottomLeft])
  // and the radius at which you want the corners to be round
  var cornerRadii:(corners: UIRectCorner, radius:CGFloat) {
    get {
      let number = objc_getAssociatedObject(self, &AssociationKey.CornerRect)  as? NSNumber ?? 0
      let radius = objc_getAssociatedObject(self, &AssociationKey.CornerRadius)  as? NSNumber ?? 0
      return (corners: UIRectCorner(rawValue: number.unsignedLongValue), radius: CGFloat(radius.floatValue))
    }
    set (v) {
      let radius = v.radius
      let closure:((Void)->Void) = {
        let path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: v.corners, cornerRadii: CGSize(width: radius, height: radius))
        let mask = CAShapeLayer()
        mask.path = path.CGPath
        self.mask = mask
      }
      let block: @convention(block) Void -> Void = closure
      let objectBlock = unsafeBitCast(block, AnyObject.self)
      objc_setAssociatedObject(self, &AssociationKey.CornerRect, NSNumber(unsignedLong: v.corners.rawValue), .OBJC_ASSOCIATION_RETAIN)
      objc_setAssociatedObject(self, &AssociationKey.CornerRadius, NSNumber(float: Float(v.radius)), .OBJC_ASSOCIATION_RETAIN)
      do { try aspect_hookSelector("layoutSublayers", withOptions: .PositionAfter, usingBlock: objectBlock) }
      catch _ { }
    }
  }
}

I wrote a simple blog post explaining this.

User · Answer

This is how you can set a corner radius for each corner of a button with Xamarin in C    var maskPath   UIBezierPath FromRoundedRect MyButton Bounds  UIRectCorner BottomLeft   UIRectCorner BottomRight      new CGSize 10 0  10 0    var maskLayer   new CAShapeLayer       Frame   MyButton Bounds      Path   maskPath CGPath    MyButton Layer Mask   maskLayer

User · Answer

Simple extension  extension UIView       func roundCorners corners  UIRectCorner  radius  CGFloat            if  available iOS 11                   self clipsToBounds   true             self layer cornerRadius   radius             var masked   CACornerMask               if corners contains  topLeft    masked insert  layerMinXMinYCorner                if corners contains  topRight    masked insert  layerMaxXMinYCorner                if corners contains  bottomLeft    masked insert  layerMinXMaxYCorner                if corners contains  bottomRight    masked insert  layerMaxXMaxYCorner                self layer maskedCorners   masked                   else               let path   UIBezierPath roundedRect  bounds  byRoundingCorners  corners  cornerRadii  CGSize width  radius  height  radius               let mask   CAShapeLayer               mask path   path cgPath             layer mask   mask                     Usage    view roundCorners corners    bottomLeft   bottomRight   radius  12

User · Answer

A lovely extension to reuse Yunus Nedim Mehel solution

Swift 2.3

extension UIView {
func roundCornersWithLayerMask(cornerRadii: CGFloat, corners: UIRectCorner) {
    let path = UIBezierPath(roundedRect: bounds,
                            byRoundingCorners: corners,
                            cornerRadii: CGSize(width: cornerRadii, height: cornerRadii))
    let maskLayer = CAShapeLayer()
    maskLayer.path = path.CGPath
    layer.mask = maskLayer
} }

Usage

let view = UIView()
view.roundCornersWithLayerMask(10,[.TopLeft,.TopRight])

User · Answer

Emma   TopRight and  BottomRight are not working for you perhaps because the call to view roundCorners is done BEFORE final view bounds are calculated  Note that the Bezier Path derives from the view bounds at the time it is called  For example  if auto layout will narrow the view  the round corners on the right side might be outside the view  Try to call it in viewDidLayoutSubviews  where the view s bound is final

User · Answer

The easiest way would be to make a mask with a rounded corner layer.

CALayer *maskLayer = [CALayer layer];
maskLayer.frame = CGRectMake(0,0,maskWidth ,maskHeight);
maskLayer.contents = (__bridge id)[[UIImage imageNamed:@"maskImageWithRoundedCorners.png"] CGImage];

aUIView.layer.mask = maskLayer;

And don't forget to:

#import <QuartzCore/QuartzCore.h>

User · Answer

Create the path  with only the top-left corner rounded  UIBezierPath  maskPath    UIBezierPath bezierPathWithRoundedRect view bounds                             byRoundingCorners  UIRectCornerBottomLeft   UIRectCornerBottomRight                              cornerRadii CGSizeMake 7 0  7 0        Create the shape layer and set its path CAShapeLayer  maskLayer    CAShapeLayer layer   maskLayer frame   cell stripBlackImnageView bounds  maskLayer path   maskPath CGPath      Set the newly created shapelayer as the mask for the image view s layer view layer mask   maskLayer

User · Answer

In Swift 4 1 and Xcode 9 4 1 In iOS 11 this single line is enough  detailsSubView layer maskedCorners     layerMinXMinYCorner   layerMaxXMinYCorner   Set your view here  See the complete code    In viewDidLoad if  available iOS 11 0               detailsSubView clipsToBounds   false         detailsSubView layer cornerRadius   10         detailsSubView layer maskedCorners     layerMinXMinYCorner   layerMaxXMinYCorner    else           For lower versions    But for lower versions let rectShape   CAShapeLayer       rectShape bounds   detailsSubView frame     rectShape position   detailsSubView center     rectShape path   UIBezierPath roundedRect  detailsSubView bounds     byRoundingCorners    topLeft    topRight   cornerRadii  CGSize width  20  height  20   cgPath     detailsSubView layer mask   rectShape  Complete code is  if  available iOS 11 0           detailsSubView clipsToBounds   false     detailsSubView layer cornerRadius   10     detailsSubView layer maskedCorners     layerMinXMinYCorner   layerMaxXMinYCorner    else       let rectShape   CAShapeLayer       rectShape bounds   detailsSubView frame     rectShape position   detailsSubView center     rectShape path   UIBezierPath roundedRect  detailsSubView bounds     byRoundingCorners    topLeft    topRight   cornerRadii  CGSize width  20  height  20   cgPath     detailsSubView layer mask   rectShape    If you are using AutoResizing in storyboard write this code in viewDidLayoutSubviews    override func viewDidLayoutSubviews         super viewDidLayoutSubviews        if  available iOS 11 0               detailsSubView clipsToBounds   false         detailsSubView layer cornerRadius   10         detailsSubView layer maskedCorners     layerMinXMinYCorner   layerMaxXMinYCorner        else           let rectShape   CAShapeLayer           rectShape bounds   detailsSubView frame         rectShape position   detailsSubView center         rectShape path   UIBezierPath roundedRect  detailsSubView bounds     byRoundingCorners    topLeft    topRight   cornerRadii  CGSize width  20  height  20   cgPath         detailsSubView layer mask   rectShape

User · Answer

Here is a short method implemented like this   -  void viewDidLoad        super viewDidLoad       UIButton  openInMaps    UIButton new        openInMaps setFrame CGRectMake 15  135  114  70        openInMaps    UIButton    self roundCornersOnView openInMaps onTopLeft NO topRight NO bottomLeft YES bottomRight NO radius 5 0      -  UIView   roundCornersOnView  UIView   view onTopLeft  BOOL tl topRight  BOOL tr bottomLeft  BOOL bl bottomRight  BOOL br radius  float radius        if  tl    tr    bl    br            UIRectCorner corner   0          if  tl   corner   corner   UIRectCornerTopLeft           if  tr   corner   corner   UIRectCornerTopRight           if  bl   corner   corner   UIRectCornerBottomLeft           if  br   corner   corner   UIRectCornerBottomRight            UIView  roundedView   view          UIBezierPath  maskPath    UIBezierPath bezierPathWithRoundedRect roundedView bounds byRoundingCorners corner cornerRadii CGSizeMake radius  radius            CAShapeLayer  maskLayer    CAShapeLayer layer           maskLayer frame   roundedView bounds          maskLayer path   maskPath CGPath          roundedView layer mask   maskLayer          return roundedView            return view

User · Answer

iOS 11   Swift 4 And you can try this code      if  available iOS 11 0          element clipsToBounds   true    element layer cornerRadius   CORNER RADIUS    element layer maskedCorners     layerMaxXMaxYCorner    else         Fallback on earlier versions     And you can using this in table view cell

User · Answer

Try this code   UIBezierPath  maskPath    UIBezierPath bezierPathWithRoundedRect view bounds byRoundingCorners   UIRectCornerTopLeft   UIRectCornerTopRight  cornerRadii CGSizeMake 5 0  5 0     CAShapeLayer  maskLayer     CAShapeLayer alloc  init   maskLayer frame   self view bounds  maskLayer path    maskPath CGPath   view layer mask   maskLayer

User · Answer

For SwiftUI I found these solutions you can check from here https   stackoverflow com a 56763282 3716103 I highly recommend the first one Option 1  Using Path   GeometryReader  more info on GeometryReader  https   swiftui-lab com geometryreader-to-the-rescue   struct ContentView   View       var body  some View            Text  quot Hello World  quot                foregroundColor  white               font  largeTitle               padding 20               background RoundedCorners color   blue  tl  0  tr  30  bl  30  br  0             RoundedCorners struct RoundedCorners  View        var color  Color    white      var tl  CGFloat   0 0     var tr  CGFloat   0 0     var bl  CGFloat   0 0     var br  CGFloat   0 0      var body  some View           GeometryReader   geometry in             Path   path in                  let w   geometry size width                 let h   geometry size height                     Make sure we do not exceed the size of the rectangle                 let tr   min min self tr  h 2   w 2                  let tl   min min self tl  h 2   w 2                  let bl   min min self bl  h 2   w 2                  let br   min min self br  h 2   w 2                   path move to  CGPoint x  w   2 0  y  0                   path addLine to  CGPoint x  w - tr  y  0                   path addArc center  CGPoint x  w - tr  y  tr   radius  tr  startAngle  Angle degrees  -90   endAngle  Angle degrees  0   clockwise  false                  path addLine to  CGPoint x  w  y  h - be                   path addArc center  CGPoint x  w - br  y  h - br   radius  br  startAngle  Angle degrees  0   endAngle  Angle degrees  90   clockwise  false                  path addLine to  CGPoint x  bl  y  h                   path addArc center  CGPoint x  bl  y  h - bl   radius  bl  startAngle  Angle degrees  90   endAngle  Angle degrees  180   clockwise  false                  path addLine to  CGPoint x  0  y  tl                   path addArc center  CGPoint x  tl  y  tl   radius  tl  startAngle  Angle degrees  180   endAngle  Angle degrees  270   clockwise  false                             fill self color                     RoundedCorners Previews struct RoundedCorners Previews  PreviewProvider       static var previews  some View           RoundedCorners color   pink  tl  40  tr  40  bl  40  br  40

User · Answer

Here is a Swift version of  JohnnyRockex answer  extension UIView        func roundCorners   corners  UIRectCorner  radius  CGFloat             let path   UIBezierPath roundedRect  self bounds  byRoundingCorners  corners  cornerRadii  CGSize width  radius  height  radius            let mask   CAShapeLayer            mask path   path cgPath          self layer mask   mask              view roundCorners   topLeft   bottomRight   radius  10    Note  If you re using Auto Layout  you ll need to subclass your UIView and call roundCorners in the view s layoutSubviews for optimal effect   class View  UIView       override func layoutSubviews             super layoutSubviews            self roundCorners   topLeft   bottomLeft   radius  10

User · Answer

A way to do this programmatically would be to create a UIView over the top part of the UIView that has the rounded corners  Or you could hide the top underneath something

User · Answer

Another version of Stephane s answer   import UIKit      class RoundCornerView  UIView       var corners   UIRectCorner     topLeft  topRight  bottomLeft  bottomRight          var roundCornerRadius   CGFloat   0 0         override func layoutSubviews                 super layoutSubviews               if corners rawValue  gt  0  amp  amp  roundCornerRadius  gt  0 0                   self roundCorners corners  corners  radius  roundCornerRadius                                  private 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

User · Answer

I am not sure why your solution did not work but the following code is working for me. Create a bezier mask and apply it to your view. In my code below I was rounding the bottom corners of the _backgroundView with a radius of 3 pixels. self is a custom UITableViewCell:

UIBezierPath *maskPath = [UIBezierPath
    bezierPathWithRoundedRect:self.backgroundImageView.bounds
    byRoundingCorners:(UIRectCornerBottomLeft | UIRectCornerBottomRight)
    cornerRadii:CGSizeMake(20, 20)
];

CAShapeLayer *maskLayer = [CAShapeLayer layer];

maskLayer.frame = self.bounds;
maskLayer.path = maskPath.CGPath;

self.backgroundImageView.layer.mask = maskLayer;

Swift version with some improvements:

let path = UIBezierPath(roundedRect:viewToRound.bounds, byRoundingCorners:[.TopRight, .BottomLeft], cornerRadii: CGSizeMake(20, 20))
let maskLayer = CAShapeLayer()

maskLayer.path = path.CGPath
viewToRound.layer.mask = maskLayer

Swift 3.0 version:

let path = UIBezierPath(roundedRect:viewToRound.bounds,
                        byRoundingCorners:[.topRight, .bottomLeft],
                        cornerRadii: CGSize(width: 20, height:  20))

let maskLayer = CAShapeLayer()

maskLayer.path = path.cgPath
viewToRound.layer.mask = maskLayer

Swift extension here

User · Answer

My solution for rounding specific corners of UIView and UITextFiels in swift is to use

.layer.cornerRadius

and

layer.maskedCorners

of actual UIView or UITextFields.

Example:

fileprivate func inputTextFieldStyle() {
        inputTextField.layer.masksToBounds = true
        inputTextField.layer.borderWidth = 1
        inputTextField.layer.cornerRadius = 25
        inputTextField.layer.maskedCorners = [.layerMaxXMaxYCorner,.layerMaxXMinYCorner]
        inputTextField.layer.borderColor = UIColor.white.cgColor
    }

And by using

.layerMaxXMaxYCorner

and

.layerMaxXMinYCorner

, I can specify top right and bottom right corner of the UITextField to be rounded.

You can see the result here:

User · Answer

Pay attention to the fact that if you have layout constraints attached to it  you must refresh this as follows in your UIView subclass   override func layoutSubviews         super layoutSubviews       roundCorners corners    topLeft   topRight   radius  3 0      If you don t do that it won t show up     And to round corners  use the extension   extension UIView      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               Additional view controller case  Whether you can t or wouldn t want to subclass a view  you can still round a view  Do it from its view controller by overriding the viewWillLayoutSubviews   function  as follows   class MyVC  UIViewController           The view to round the top-left and top-right hand corners     let theView  UIView             let v   UIView frame  CGRect x  10  y  10  width  200  height  200           v backgroundColor    red         return v              override func loadView             super loadView           view addSubview theView             override func viewWillLayoutSubviews             super viewWillLayoutSubviews               Call the roundCorners   func right there          theView roundCorners corners    topLeft   topRight   radius  30

User · Answer

Swift code example here  https   stackoverflow com a 35621736 308315    Not directly  You will have to    Create a CAShapeLayer Set its path to be a CGPathRef based on view bounds but with only two rounded corners  probably by using   UIBezierPath bezierPathWithRoundedRect byRoundingCorners cornerRadii    Set your view layer mask to be the CAShapeLayer

User · Answer

And finally    there is CACornerMask in iOS11  With CACornerMask it can be done pretty easy   let view   UIView   view clipsToBounds   true view layer cornerRadius   10 view layer maskedCorners     layerMaxXMinYCorner   layerMinXMinYCorner     Top right corner  Top left corner respectively

User · Answer

After change bit of code  apinho In swift 4 3 working fine  extension UIView   func roundCornersWithLayerMask cornerRadii  CGFloat  corners  UIRectCorner        let path   UIBezierPath roundedRect  bounds                              byRoundingCorners  corners                              cornerRadii  CGSize width  cornerRadii  height  cornerRadii       let maskLayer   CAShapeLayer       maskLayer path   path cgPath     layer mask   maskLayer         To use this function for you view   YourViewName  roundCornersWithLayerMask cornerRadii  20 corners    topLeft  topRight

User · Answer

Swift 4 Swift 5 easy way in 1 line  Usage     MARK - Corner Radius of only two side of UIViews self roundCorners view  yourview  corners    bottomLeft   topRight   radius  12 0    Function     MARK - Corner Radius of only two side of UIViews func roundCorners view  UIView  corners  UIRectCorner  radius  CGFloat           let path   UIBezierPath roundedRect  view bounds  byRoundingCorners  corners  cornerRadii  CGSize width  radius  height  radius           let mask   CAShapeLayer           mask path   path cgPath         view layer mask   mask     In Objective-C  Usage    self verticalSeparatorView roundCorners UIRectCornerTopLeft radius 10 0    Function used in a Category  only one corner    - void roundCorners   UIRectCorner  corners radius  CGFloat radius           UIBezierPath  path    UIBezierPath bezierPathWithRoundedRect self bounds byRoundingCorners corners cornerRadii CGSizeMake radius  radius            CAShapeLayer  mask     CAShapeLayer alloc  init           mask path   path CGPath          self layer mask   mask

User · Answer

This would be the simplest answer    yourView layer cornerRadius   8 yourView layer masksToBounds   true yourView layer maskedCorners     layerMinXMinYCorner   layerMaxXMinYCorner

User · Answer

There is a super simple way of doing it   I found it on here  view clipsToBounds   true view layer cornerRadius   24 view layer maskedCorners     layerMinXMinYCorner   layerMaxXMinYCorner   It uses the stock cornerRadius property on the CALayer of a view   You just need to define the corners   layerMinXMinYCorner is top left layerMaxXMinYCorner is top right

User · Answer

In Swift 4 2  Create it via  IBDesignable like this    IBDesignable  class DesignableViewCustomCorner  UIView         IBInspectable var cornerRadious  CGFloat   0           didSet               let path   UIBezierPath roundedRect  self bounds  byRoundingCorners    topLeft   topRight   cornerRadii  CGSize width  cornerRadious  height  cornerRadious               let mask   CAShapeLayer               mask path   path cgPath             self layer mask   mask

User · Answer

If you re looking for an interface builder only solution there is one for iOS 11 and higher  See my answer here  https   stackoverflow com a 58626264

User · Answer

Swift 4  extension UIView        func roundTop radius CGFloat   5           self clipsToBounds   true         self layer cornerRadius   radius         if  available iOS 11 0                   self layer maskedCorners     layerMaxXMinYCorner   layerMinXMinYCorner            else                  Fallback on earlier versions                      func roundBottom radius CGFloat   5           self clipsToBounds   true         self layer cornerRadius   radius         if  available iOS 11 0                   self layer maskedCorners     layerMaxXMaxYCorner   layerMinXMaxYCorner            else                  Fallback on earlier versions

[ios] How to set cornerRadius for only top-left and top-right corner of a UIView?

The answer is

Note

Examples related to ios

Examples related to cocoa-touch

Examples related to uiview

Examples related to cornerradius

Tags