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

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

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

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

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

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

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

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 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

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

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 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

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

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

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

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

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

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

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

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  lt QuartzCore QuartzCore h gt

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

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

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

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

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

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

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

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   amp AssociationKey CornerRect   as  NSNumber    0       let radius   objc getAssociatedObject self   amp AssociationKey CornerRadius   as  NSNumber    0       return  corners  UIRectCorner rawValue  number unsignedLongValue   radius  CGFloat radius floatValue             set  v          let radius   v radius       let closure   Void - gt 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 - gt  Void   closure       let objectBlock   unsafeBitCast block  AnyObject self        objc setAssociatedObject self   amp AssociationKey CornerRect  NSNumber unsignedLong  v corners rawValue    OBJC ASSOCIATION RETAIN        objc setAssociatedObject self   amp 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

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

Examples related to ios

Examples related to cocoa-touch

Examples related to uiview

Examples related to cornerradius