How to add a border just on the top side of a UIView

Question

My question is on the title   I don t know how to add a border in a specific side  top or bottom  any side    layer border draws the border for the whole view

User · Answer

Swift version   var myView   UIView frame  CGRect x  100  y  100  width  100  height  100   myView backgroundColor   UIColor yellowColor     var border   CALayer   border backgroundColor   UIColor lightGrayColor   border frame   CGRect x  0  y  0  width  myView frame width  height  0 5   myView layer addSublayer border    Edit  For updated versions check my repo here   https   github com goktugyil EZSwiftExtensions blob master Sources UIViewExtensions swift  Look at the addBorder parts

User · Answer

In Swift 4 and 3  let borderThickness   2 let topBorder   UIView   topBorder backgroundColor   UIColor red topBorder frame   CGRect x  0  y  0  width                     Int yourViewFromOutlet frame size width   height                     borderThickness  yourViewFromOutlet addSubview topBorder

User · Answer

For setting Top Border and Bottom Border for a UIView in Swift   let topBorder   UIView frame  CGRect x  0  y  0  width  10  height  1   topBorder backgroundColor   UIColor black myView addSubview topBorder   let bottomBorder   UIView frame  CGRect x  0  y  myView frame size height - 1  width  10  height  1   bottomBorder backgroundColor   UIColor black myView addSubview bottomBorder

User · Answer

I made some changes to Dan s answer so that I could add borders to multiple edges with one command   infoView addBorder toEdges    left   bottom   right   color  borderColor  thickness  1    Here s the full code   extension UIView       func addBorder toEdges edges  UIRectEdge  color  UIColor  thickness  CGFloat             func addBorder toEdge edges  UIRectEdge  color  UIColor  thickness  CGFloat                let border   CALayer               border backgroundColor   color cgColor              switch edges               case  top                  border frame   CGRect x  0  y  0  width  frame width  height  thickness              case  bottom                  border frame   CGRect x  0  y  frame height - thickness  width  frame width  height  thickness              case  left                  border frame   CGRect x  0  y  0  width  thickness  height  frame height              case  right                  border frame   CGRect x  frame width - thickness  y  0  width  thickness  height  frame height              default                  break                            layer addSublayer border                     if edges contains  top     edges contains  all                addBorder toEdge   top  color  color  thickness  thickness                     if edges contains  bottom     edges contains  all                addBorder toEdge   bottom  color  color  thickness  thickness                     if edges contains  left     edges contains  all                addBorder toEdge   left  color  color  thickness  thickness                     if edges contains  right     edges contains  all                addBorder toEdge   right  color  color  thickness  thickness

User · Answer

Added capability for rounded corners to Adam Waite s original post  and the multiple edits Important   Don t forgot to add  label layoutIfNeeded    right before calling  addborder  as previously commented Note  I ve only tested this on UILabels  extension CALayer            enum BorderSide           case top         case right         case bottom         case left         case notRight         case notLeft         case topAndBottom         case all                enum Corner           case topLeft         case topRight         case bottomLeft         case bottomRight                func addBorder side  BorderSide  thickness  CGFloat  color  CGColor  maskedCorners  CACornerMask    nil            var topWidth   frame size width  var bottomWidth   topWidth         var leftHeight   frame size height  var rightHeight   leftHeight                  var topXOffset  CGFloat   0  var bottomXOffset  CGFloat   0         var leftYOffset  CGFloat   0  var rightYOffset  CGFloat   0                     Draw the corners and set side offsets         switch maskedCorners           case   layerMinXMinYCorner   layerMaxXMinYCorner      Top only             addCorner  topLeft  thickness  thickness  color  color              addCorner  topRight  thickness  thickness  color  color              topWidth -  cornerRadius 2             leftHeight -  cornerRadius  rightHeight -  cornerRadius             topXOffset   cornerRadius  leftYOffset   cornerRadius  rightYOffset   cornerRadius                      case   layerMinXMaxYCorner   layerMaxXMaxYCorner      Bottom only             addCorner  bottomLeft  thickness  thickness  color  color              addCorner  bottomRight  thickness  thickness  color  color              bottomWidth -  cornerRadius 2             leftHeight -  cornerRadius  rightHeight -  cornerRadius             bottomXOffset   cornerRadius                      case   layerMinXMinYCorner   layerMinXMaxYCorner      Left only             addCorner  topLeft  thickness  thickness  color  color              addCorner  bottomLeft  thickness  thickness  color  color              topWidth -  cornerRadius  bottomWidth -  cornerRadius             leftHeight -  cornerRadius 2             leftYOffset   cornerRadius  topXOffset   cornerRadius  bottomXOffset   cornerRadius                       case   layerMaxXMinYCorner   layerMaxXMaxYCorner      Right only             addCorner  topRight  thickness  thickness  color  color              addCorner  bottomRight  thickness  thickness  color  color              topWidth -  cornerRadius  bottomWidth -  cornerRadius             rightHeight -  cornerRadius 2             rightYOffset   cornerRadius                      case   layerMaxXMinYCorner   layerMaxXMaxYCorner      All                layerMinXMaxYCorner   layerMinXMinYCorner               addCorner  topLeft  thickness  thickness  color  color              addCorner  topRight  thickness  thickness  color  color              addCorner  bottomLeft  thickness  thickness  color  color              addCorner  bottomRight  thickness  thickness  color  color              topWidth -  cornerRadius 2  bottomWidth -  cornerRadius 2             topXOffset   cornerRadius  bottomXOffset   cornerRadius             leftHeight -  cornerRadius 2  rightHeight -  cornerRadius 2             leftYOffset   cornerRadius  rightYOffset   cornerRadius                      default  break                               Draw the sides         switch side           case  top              addLine x  topXOffset  y  0  width  topWidth  height  thickness  color  color                       case  right              addLine x  frame size width - thickness  y  rightYOffset  width  thickness  height  rightHeight  color  color                       case  bottom              addLine x  bottomXOffset  y  frame size height - thickness  width  bottomWidth  height  thickness  color  color                       case  left              addLine x  0  y  leftYOffset  width  thickness  height  leftHeight  color  color              Multiple Sides         case  notRight              addLine x  topXOffset  y  0  width  topWidth  height  thickness  color  color              addLine x  0  y  leftYOffset  width  thickness  height  leftHeight  color  color              addLine x  bottomXOffset  y  frame size height - thickness  width  bottomWidth  height  thickness  color  color           case  notLeft              addLine x  topXOffset  y  0  width  topWidth  height  thickness  color  color              addLine x  frame size width - thickness  y  rightYOffset  width  thickness  height  rightHeight  color  color              addLine x  bottomXOffset  y  frame size height - thickness  width  bottomWidth  height  thickness  color  color           case  topAndBottom              addLine x  topXOffset  y  0  width  topWidth  height  thickness  color  color              addLine x  bottomXOffset  y  frame size height - thickness  width  bottomWidth  height  thickness  color  color           case  all              addLine x  topXOffset  y  0  width  topWidth  height  thickness  color  color              addLine x  frame size width - thickness  y  rightYOffset  width  thickness  height  rightHeight  color  color              addLine x  bottomXOffset  y  frame size height - thickness  width  bottomWidth  height  thickness  color  color              addLine x  0  y  leftYOffset  width  thickness  height  leftHeight  color  color                           private func addLine x  CGFloat  y  CGFloat  width  CGFloat  height  CGFloat  color  CGColor            let border   CALayer           border frame   CGRect x  x  y  y  width  width  height  height          border backgroundColor   color         addSublayer border                 private func addCorner   corner  Corner  thickness  CGFloat  color  CGColor               Set default to top left         let width   frame size width  let height   frame size height         var x   cornerRadius         var y   cornerRadius         var startAngle  CGFloat    pi  var endAngle  CGFloat    pi 3 2                  switch corner           case  bottomLeft              y   height - cornerRadius              startAngle    pi 2  endAngle    pi                      case  bottomRight              x   width - cornerRadius             y   height - cornerRadius             startAngle   0  endAngle    pi 2                      case  topRight              x   width - cornerRadius             startAngle    pi 3 2  endAngle   0                      default  break                            let cornerPath   UIBezierPath arcCenter  CGPoint x  x  y  y                                         radius  cornerRadius - thickness                                        startAngle  startAngle                                        endAngle  endAngle                                        clockwise  true           let cornerShape   CAShapeLayer           cornerShape path   cornerPath cgPath         cornerShape lineWidth   thickness         cornerShape strokeColor   color         cornerShape fillColor   nil         addSublayer cornerShape

User · Answer

In addition to n8tr can add that there is an availability to set them from storyboard either  - add two properties like borderColor and borderWidth in  h file  - then you could add keyPaths right in storyboard  see link to screenshot

User · Answer

extension UIView        func addBorder edge  UIRectEdge  color  UIColor  borderWidth  CGFloat             let seperator   UIView           self addSubview seperator          seperator translatesAutoresizingMaskIntoConstraints   false          seperator backgroundColor   color          if edge     top    edge     bottom                       seperator leadingAnchor constraint equalTo  self leadingAnchor  constant  0  isActive   true             seperator trailingAnchor constraint equalTo  self trailingAnchor  constant  0  isActive   true             seperator heightAnchor constraint equalToConstant  borderWidth  isActive   true              if edge     top                               seperator topAnchor constraint equalTo  self topAnchor  constant  0  isActive   true                           else                               seperator bottomAnchor constraint equalTo  self bottomAnchor  constant  0  isActive   true                                 else if edge     left    edge     right                       seperator topAnchor constraint equalTo  self topAnchor  constant  0  isActive   true             seperator bottomAnchor constraint equalTo  self bottomAnchor  constant  0  isActive   true             seperator widthAnchor constraint equalToConstant  borderWidth  isActive   true              if edge     left                               seperator leadingAnchor constraint equalTo  self leadingAnchor  constant  0  isActive   true                           else                               seperator trailingAnchor constraint equalTo  self trailingAnchor  constant  0  isActive   true

User · Answer

For me works  extension UIView        func addBorders edges  UIRectEdge    all  color  UIColor    black  width  CGFloat   1 0             func createBorder   - gt  UIView               let borderView   UIView frame  CGRect zero              borderView translatesAutoresizingMaskIntoConstraints   false             borderView backgroundColor   color             return borderView                    if  edges contains  all     edges contains  top                 let topBorder   createBorder               self addSubview topBorder              NSLayoutConstraint activate                   topBorder topAnchor constraint equalTo  self topAnchor                   topBorder leadingAnchor constraint equalTo  self leadingAnchor                   topBorder trailingAnchor constraint equalTo  self trailingAnchor                   topBorder heightAnchor constraint equalToConstant  width                                       if  edges contains  all     edges contains  left                 let leftBorder   createBorder               self addSubview leftBorder              NSLayoutConstraint activate                   leftBorder topAnchor constraint equalTo  self topAnchor                   leftBorder bottomAnchor constraint equalTo  self bottomAnchor                   leftBorder leadingAnchor constraint equalTo  self leadingAnchor                   leftBorder widthAnchor constraint equalToConstant  width                                       if  edges contains  all     edges contains  right                 let rightBorder   createBorder               self addSubview rightBorder              NSLayoutConstraint activate                   rightBorder topAnchor constraint equalTo  self topAnchor                   rightBorder bottomAnchor constraint equalTo  self bottomAnchor                   rightBorder trailingAnchor constraint equalTo  self trailingAnchor                   rightBorder widthAnchor constraint equalToConstant  width                                       if  edges contains  all     edges contains  bottom                 let bottomBorder   createBorder               self addSubview bottomBorder              NSLayoutConstraint activate                   bottomBorder bottomAnchor constraint equalTo  self bottomAnchor                   bottomBorder leadingAnchor constraint equalTo  self leadingAnchor                   bottomBorder trailingAnchor constraint equalTo  self trailingAnchor                   bottomBorder heightAnchor constraint equalToConstant  width

User · Answer

Swift 3 version  extension UIView       enum ViewSide           case Top  Bottom  Left  Right            func addBorder toSide side  ViewSide  withColor color  UIColor  andThickness thickness  CGFloat             let border   CALayer           border backgroundColor   color cgColor          switch side           case  Top              border frame   CGRect x  0  y  0  width  frame size width  height  thickness          case  Bottom              border frame   CGRect x  0  y  frame size height - thickness  width  frame size width  height  thickness          case  Left              border frame   CGRect x  0  y  0  width  thickness  height  frame size height          case  Right              border frame   CGRect x  frame size width - thickness  y  0  width  thickness  height  frame size height                     layer addSublayer border            In order to set corresponding border you should override viewDidLayoutSubviews   method   override func viewDidLayoutSubviews         super viewDidLayoutSubviews       yourView addBorder toSide  UIView ViewSide Top  withColor  UIColor lightGray  andThickness  1

User · Answer

Swift 3 0  Swift 4 1  extension CALayer      func addBorder edge  UIRectEdge  color  UIColor  thickness  CGFloat         let border   CALayer        switch edge       case UIRectEdge top          border frame   CGRect x  0  y  0  width  frame width  height  thickness       case UIRectEdge bottom          border frame   CGRect x 0  y  frame height - thickness  width  frame width  height thickness       case UIRectEdge left          border frame   CGRect x 0  y 0  width  thickness  height  frame height       case UIRectEdge right          border frame   CGRect x  frame width - thickness  y  0  width  thickness  height  frame height       default  do               border backgroundColor   color cgColor      addSublayer border

User · Answer

MARK - Add LeftBorder For View   void prefix addLeftBorder  UIView    viewName       CALayer  leftBorder    CALayer layer       leftBorder backgroundColor    UIColor colorWithRed 221 255 0f green 221 255 0f blue 221 255 0f alpha 1 0f  CGColor      leftBorder frame   CGRectMake 0 0 1 0 viewName frame size height        viewName layer addSublayer leftBorder         MARK - Add RightBorder For View   void prefix addRightBorder  UIView    viewName       CALayer  rightBorder    CALayer layer       rightBorder backgroundColor    UIColor colorWithRed 221 255 0f green 221 255 0f blue 221 255 0f alpha 1 0f  CGColor      rightBorder frame   CGRectMake viewName frame size width - 1 0 0 1 0 viewName frame size height        viewName layer addSublayer rightBorder         MARK - Add Bottom Border For View   void prefix addbottomBorder  UIView    viewName       CALayer  bottomBorder    CALayer layer       bottomBorder backgroundColor    UIColor colorWithRed 221 255 0f green 221 255 0f blue 221 255 0f alpha 1 0f  CGColor      bottomBorder frame   CGRectMake 0 viewName frame size height - 1 0 viewName frame size width 1 0        viewName layer addSublayer bottomBorder

User · Answer

My answer to a similar question  https   stackoverflow com a 27141956 435766 I personally prefer going down the category road on that one  since I want to be able to use it on any subclass of UIView

User · Answer

Use below code in viewDidLoad  -  void viewDidLoad        super viewDidLoad          self view layer setBorderWidth  1 0        self view layer setCornerRadius 8 0f        self view layer setMasksToBounds YES        self view layer setBorderColor   UIColor colorWithRed 251 0f 255 0f green 185 0f 255 0f blue 23 0f 255 0f alpha 1 0f          this code set red color border to your view

User · Answer

Personally I like the sub-classing of the view   drawRect  but here s just another way of going about it  and it kind of works along the same lines as the accepted answer by  If Pollavith    Your new border layer can be set up to have whatever dimensions you like   So  like  If Pollavith s answer  you create a layer to be as tall as you want it to be  and as wide as the view you want to have bordered   Use the layer s frame definition to place it where you want it  and then add it as a sub-layer to your view   For reference  my own requirement was to put a border on the LEFT-HAND side of the view  please don t cut and paste this code and dis  me just  cos it doesn t put a border at the top of the view -- modifying the code below is simple enough        CALayer  leftBorder    CALayer layer   leftBorder borderColor    UIColor colorWithRed 0 0 green 91 0 255 0 blue 141 0 255 0 alpha 1 0  CGColor  leftBorder borderWidth   1  leftBorder frame   CGRectMake 0  0  1 0  CGRectGetHeight self myTargetView frame     self myTargetView layer addSublayer leftBorder     I guess the only moderate benefit over this and making a small UIView or UILabel is that the CALayer is supposedly  lighter-weight   and there s a lot of interesting views  as in opinions  about over-riding drawRect versus using CALayers  like here  iOS  Using UIView  39 s   39 drawRect   39  vs  its layer  39 s delagate   39 drawLayer inContext   39     Animal451  I like the colour blue

User · Answer

Inspired by  Addison I ve rewritten the extension without the use of any third party framework  as he used SnapKit and CocoaLumberjack   As in  Addisons approach I m also removing previously added borders  so this implementation should play nice with reusable views as table cells and collection cells   fileprivate class BorderView  UIView       dummy class to help us differentiate among border views and other views                                            to enabling us to remove existing borders and place new ones  extension UIView        func setBorders toEdges edges   UIRectEdge   withColor color  UIColor  inset  CGFloat   0  thickness  CGFloat               Remove existing edges         for view in subviews               if view is BorderView                   view removeFromSuperview                                      Add new edges         if edges contains  all                addSidedBorder toEdge    left  right   top   bottom   withColor  color  inset  inset  thickness  thickness                    if edges contains  left                addSidedBorder toEdge    left   withColor  color  inset  inset  thickness  thickness                    if edges contains  right                addSidedBorder toEdge    right   withColor  color  inset  inset  thickness  thickness                    if edges contains  top                addSidedBorder toEdge    top   withColor  color  inset  inset  thickness  thickness                    if edges contains  bottom                addSidedBorder toEdge    bottom   withColor  color  inset  inset  thickness  thickness                       private func addSidedBorder toEdge edges   RectangularEdges   withColor color  UIColor  inset  CGFloat   0  thickness  CGFloat            for edge in edges               let border   BorderView frame   zero              border backgroundColor   color             addSubview border              border translatesAutoresizingMaskIntoConstraints   false             switch edge               case  left                  NSLayoutConstraint activate                   border leftAnchor constraint equalTo  self leftAnchor  constant  inset                       border topAnchor constraint equalTo  self topAnchor  constant  inset                       border bottomAnchor constraint equalTo  self bottomAnchor  constant  -inset                       NSLayoutConstraint item  border  attribute   width  relatedBy   equal  toItem  nil  attribute   width  multiplier  1  constant  thickness                 case  right                  NSLayoutConstraint activate                       border rightAnchor constraint equalTo  self rightAnchor  constant  -inset                       border topAnchor constraint equalTo  self topAnchor  constant  inset                       border bottomAnchor constraint equalTo  self bottomAnchor  constant  -inset                       NSLayoutConstraint item  border  attribute   width  relatedBy   equal  toItem  nil  attribute   width  multiplier  1  constant  thickness                 case  top                  NSLayoutConstraint activate                       border leftAnchor constraint equalTo  self leftAnchor  constant  inset                       border rightAnchor constraint equalTo  self rightAnchor  constant  -inset                       border topAnchor constraint equalTo  self topAnchor  constant  inset                       NSLayoutConstraint item  border  attribute   height  relatedBy   equal  toItem  nil  attribute   height  multiplier  1  constant  thickness                 case  bottom                  NSLayoutConstraint activate                       border leftAnchor constraint equalTo  self leftAnchor  constant  inset                       border rightAnchor constraint equalTo  self rightAnchor  constant  -inset                       border bottomAnchor constraint equalTo  self bottomAnchor  constant  -inset                       NSLayoutConstraint item  border  attribute   height  relatedBy   equal  toItem  nil  attribute   height  multiplier  1  constant  thickness                                        private enum RectangularEdges           case left         case right         case top         case bottom

User · Answer

The best way for me is a category on UIView  but adding views instead of CALayers  so we can take advantage of AutoresizingMasks to make sure borders resize along with the superview   Objective C  -  void addTopBorderWithColor  UIColor   color andWidth  CGFloat  borderWidth       UIView  border    UIView new       border backgroundColor   color       border setAutoresizingMask UIViewAutoresizingFlexibleWidth   UIViewAutoresizingFlexibleBottomMargin       border frame   CGRectMake 0  0  self frame size width  borderWidth        self addSubview border      -  void addBottomBorderWithColor  UIColor   color andWidth  CGFloat  borderWidth       UIView  border    UIView new       border backgroundColor   color       border setAutoresizingMask UIViewAutoresizingFlexibleWidth   UIViewAutoresizingFlexibleTopMargin       border frame   CGRectMake 0  self frame size height - borderWidth  self frame size width  borderWidth        self addSubview border      -  void addLeftBorderWithColor  UIColor   color andWidth  CGFloat  borderWidth       UIView  border    UIView new       border backgroundColor   color      border frame   CGRectMake 0  0  borderWidth  self frame size height        border setAutoresizingMask UIViewAutoresizingFlexibleHeight   UIViewAutoresizingFlexibleRightMargin        self addSubview border      -  void addRightBorderWithColor  UIColor   color andWidth  CGFloat  borderWidth       UIView  border    UIView new       border backgroundColor   color       border setAutoresizingMask UIViewAutoresizingFlexibleHeight   UIViewAutoresizingFlexibleLeftMargin       border frame   CGRectMake self frame size width - borderWidth  0  borderWidth  self frame size height        self addSubview border       Swift 5  func addTopBorder with color  UIColor   andWidth borderWidth  CGFloat        let border   UIView       border backgroundColor   color     border autoresizingMask     flexibleWidth   flexibleBottomMargin      border frame   CGRect x  0  y  0  width  frame size width  height  borderWidth      addSubview border     func addBottomBorder with color  UIColor   andWidth borderWidth  CGFloat        let border   UIView       border backgroundColor   color     border autoresizingMask     flexibleWidth   flexibleTopMargin      border frame   CGRect x  0  y  frame size height - borderWidth  width  frame size width  height  borderWidth      addSubview border     func addLeftBorder with color  UIColor   andWidth borderWidth  CGFloat        let border   UIView       border backgroundColor   color     border frame   CGRect x  0  y  0  width  borderWidth  height  frame size height      border autoresizingMask     flexibleHeight   flexibleRightMargin      addSubview border     func addRightBorder with color  UIColor   andWidth borderWidth  CGFloat        let border   UIView       border backgroundColor   color     border autoresizingMask     flexibleHeight   flexibleLeftMargin      border frame   CGRect x  frame size width - borderWidth  y  0  width  borderWidth  height  frame size height      addSubview border

User · Answer

Note  most solutions here are not adaptive and will not resize  The solutions that will resize will have a massive impact on your startup time since they use a lot of CPU   You can use this solution beneath  It works on UIBezierPaths which are lighter than layers  causing quick startup times  It is easy to use  see instructions beneath   class ResizeBorderView  UIView       var color   UIColor white     var lineWidth  CGFloat   1     var edges    UIRectEdge             didSet               setNeedsDisplay                       override func draw   rect  CGRect            if edges contains  top     edges contains  all               let path   UIBezierPath               path lineWidth   lineWidth             color setStroke               UIColor blue setFill               path move to  CGPoint x  0  y  0   lineWidth   2               path addLine to  CGPoint x  self bounds width  y  0   lineWidth   2               path stroke                     if edges contains  bottom     edges contains  all               let path   UIBezierPath               path lineWidth   lineWidth             color setStroke               UIColor blue setFill               path move to  CGPoint x  0  y  self bounds height - lineWidth   2               path addLine to  CGPoint x  self bounds width  y  self bounds height - lineWidth   2               path stroke                     if edges contains  left     edges contains  all               let path   UIBezierPath               path lineWidth   lineWidth             color setStroke               UIColor blue setFill               path move to  CGPoint x  0   lineWidth   2  y  0               path addLine to  CGPoint x  0   lineWidth   2  y  self bounds height               path stroke                     if edges contains  right     edges contains  all               let path   UIBezierPath               path lineWidth   lineWidth             color setStroke               UIColor blue setFill               path move to  CGPoint x  self bounds width - lineWidth   2  y  0               path addLine to  CGPoint x  self bounds width - lineWidth   2  y  self bounds height               path stroke                        Set your UIView s class to ResizeBorderView Set the color and line width by using yourview color and yourview lineWidth in your viewDidAppear method Set the edges  example  yourview edges     right   left     all   for all Enjoy quick start and resizing borders

User · Answer

Old question  but the autolayout-solution with runtime border adjustments still missing   borders for    left   bottom   width  2  color   red    The following UIView extension will add the border only on the given edges  If you change the edges at runtime  the borders will adjust accordingly   extension UIView       func borders for edges  UIRectEdge   width CGFloat   1  color  UIColor    black             if edges contains  all                layer borderWidth   width             layer borderColor   color cgColor           else               let allSpecificBorders  UIRectEdge      top   bottom   left   right               for edge in allSpecificBorders                   if let v   viewWithTag Int edge rawValue                         v removeFromSuperview                                      if edges contains edge                        let v   UIView                       v tag   Int edge rawValue                      v backgroundColor   color                     v translatesAutoresizingMaskIntoConstraints   false                     addSubview v                       var horizontalVisualFormat    H                       var verticalVisualFormat    V                        switch edge                       case UIRectEdge bottom                          horizontalVisualFormat      - 0 - v - 0 -                           verticalVisualFormat      v   width   - 0 -                       case UIRectEdge top                          horizontalVisualFormat      - 0 - v - 0 -                           verticalVisualFormat      - 0 - v   width                         case UIRectEdge left                          horizontalVisualFormat      - 0 - v   width                             verticalVisualFormat      - 0 - v - 0 -                       case UIRectEdge right                          horizontalVisualFormat      v   width   - 0 -                           verticalVisualFormat      - 0 - v - 0 -                       default                          break                                            self addConstraints NSLayoutConstraint constraints withVisualFormat  horizontalVisualFormat  options   directionLeadingToTrailing  metrics  nil  views    v   v                        self addConstraints NSLayoutConstraint constraints withVisualFormat  verticalVisualFormat  options   directionLeadingToTrailing  metrics  nil  views    v   v

User · Answer

For Xamarin in C  I just create the border inline when adding the sub layer    View Layer AddSublayer new CALayer                 BackgroundColor   UIColor Black CGColor          Frame   new CGRect 0  0  View Frame Width  0 5f            You can arrange this  as suggested by others  for bottom  left and right borders

User · Answer

Convert DanShev answer to Swift 3  extension CALayer    func addBorder edge  UIRectEdge  color  UIColor  thickness  CGFloat         let border   CALayer        switch edge       case  top          border frame   CGRect x  0  y  0  width  self frame width  height  thickness          break     case  bottom          border frame   CGRect x  0  y  self frame height - thickness  width  self frame width  height  thickness          break     case  left          border frame   CGRect x  0  y  0  width  thickness  height  self frame height          break     case  right          border frame   CGRect x  self frame width - thickness  y  0  width  thickness  height  self frame height          break     default          break            border backgroundColor   color cgColor       self addSublayer border

User · Answer

Building off of NSBum s answer  I took a similar approach and created this simple UIView subclass so that it works in Interface Builder and works with constraints  github link By using CGContextFillRect instead of CGContextStrokePath  I was able to predictably keep the lines completely solid and within the bounds of the view   Here s my blog post about it  http   natrosoft com  p 55  -- Basically just drop in a UIView in Interface Builder and change its class type to NAUIViewWithBorders  -- Then in your VC s viewDidLoad do something like       For a top border only                                              -    self myBorderView borderColorTop    UIColor redColor   self myBorderView  borderWidthsAll   1 0f      For borders with different colors and widths                                self myBorderView borderWidths   UIEdgeInsetsMake 2 0  4 0  6 0  8 0   self myBorderView borderColorTop    UIColor blueColor   self myBorderView borderColorRight    UIColor redColor   self myBorderView borderColorBottom    UIColor greenColor   self myBorderView borderColorLeft    UIColor darkGrayColor     Here s a direct link to the  m file so you can see the implementation  There is a demo project as well   Hope this helps someone

User · Answer

Subclass UIView and implement drawRect  in your subclass  e g    Objective-c  -  void drawRect  CGRect rect       CGContextRef context   UIGraphicsGetCurrentContext        CGContextMoveToPoint context  CGRectGetMinX rect   CGRectGetMinY rect        CGContextAddLineToPoint context  CGRectGetMaxX rect   CGRectGetMinY rect        CGContextSetStrokeColorWithColor context    UIColor redColor  CGColor         CGContextSetLineWidth context  2 0       CGContextStrokePath context       Swift 4  override func draw   rect  CGRect         let cgContext   UIGraphicsGetCurrentContext       cgContext  move to  CGPoint x  rect minX  y  rect minY       cgContext  addLine to  CGPoint x  rect maxX  y  rect minY       cgContext  setStrokeColor UIColor red cgColor      cgContext  setLineWidth 2 0      cgContext  strokePath       This draws a 2 pixel red line as a top border   All of the other variations you mention are left as a trivial exercise for the reader   Quartz 2D Programming Guide is recommended

User · Answer

Code for the selected answer  in case anyone wants it   NOTE  This does not work with autolayout  aka  rotating device to landscape  etc     First define a thickness   NSInteger borderThickness   1    Then just copy use any or all of these to set the border you want to set   Top Border  UIView  topBorder    UIView new   topBorder backgroundColor    UIColor lightGrayColor   topBorder frame   CGRectMake 0  0  myView frame size width  borderThickness    myView addSubview topBorder     Bottom Border  UIView  bottomBorder    UIView new   bottomBorder backgroundColor    UIColor lightGrayColor   bottomBorder frame   CGRectMake 0  myView frame size height - borderThickness  myView frame size width  borderThickness    myView addSubview bottomBorder     Left Border  UIView  leftBorder    UIView new   leftBorder backgroundColor    UIColor lightGrayColor   leftBorder frame   CGRectMake 0  0  borderThickness  myView frame size height    myView addSubview leftBorder     Right Border  UIView  rightBorder    UIView new   rightBorder backgroundColor    UIColor lightGrayColor   rightBorder frame   CGRectMake myView frame size width - borderThickness  0  borderThickness  myView frame size height    myView addSubview rightBorder

User · Answer

Here s a Swift 4 version of Pauls s answer  func addTopBorder color  UIColor  thickness  CGFloat        let border   UIView       border backgroundColor   color     border autoresizingMask     flexibleWidth   flexibleBottomMargin      border frame   CGRect x  0  y  0  width  frame size width  height  thickness      addSubview border     func addBottomBorder color  UIColor  thickness  CGFloat        let border   UIView       border backgroundColor   color     border autoresizingMask     flexibleWidth   flexibleTopMargin      border frame   CGRect x  0  y  frame size height - thickness  width  frame size width  height  thickness      addSubview border     func addLeftBorder color  UIColor  thickness  CGFloat        let border   UIView       border backgroundColor   color     border autoresizingMask     flexibleHeight   flexibleRightMargin      border frame   CGRect x  0  y  0  width  thickness  height  frame size height      addSubview border     func addRightBorder color  UIColor  thickness  CGFloat        let border   UIView       border backgroundColor   color     border autoresizingMask     flexibleHeight   flexibleLeftMargin      border frame   CGRect x  frame size width - thickness  y  0  width  thickness  height  frame size height      addSubview border

User · Answer

In case someone will ever need Xamarin version   public static class UIUtils       public static void AddBorder this CALayer cALayer  UIRectEdge edge  UIColor color  float thickness                 var border   new CALayer            switch  edge                         case UIRectEdge Top                  border Frame   new CGRect 0  0  cALayer Frame Width  height  thickness                   break              case UIRectEdge Bottom                  border Frame   new CGRect 0  cALayer Frame Height - thickness  width  cALayer Frame Width  height  thickness                   break              case UIRectEdge Left                  border Frame   new CGRect 0  0  width  thickness  height  cALayer Frame Height                   break              case UIRectEdge Right                  border Frame   new CGRect cALayer Frame Width - thickness  y  0  width  thickness  height  cALayer Frame Height                   break              default  break                    border BackgroundColor   color CGColor          cALayer AddSublayer border

User · Answer

If I m building from within the storyboard  I prefer add an UIView behind my useful UIView    If I want to create a border on the top of my UIView  I just increase the height of the background UIView by my border width   The same can be done for any other side

User · Answer

I consider subclassing UIView and overriding drawRect overkill here  Why not add an extension on UIView and add border subviews    discardableResult func addBorders edges  UIRectEdge                  color  UIColor                  inset  CGFloat   0 0                  thickness  CGFloat   1 0  - gt   UIView         var borders    UIView          discardableResult     func addBorder formats  String     - gt  UIView           let border   UIView frame   zero          border backgroundColor   color         border translatesAutoresizingMaskIntoConstraints   false         addSubview border          addConstraints formats flatMap               NSLayoutConstraint constraints withVisualFormat   0                                             options                                                 metrics    inset   inset   thickness   thickness                                              views    border   border              borders append border          return border             if edges contains  top     edges contains  all            addBorder formats   V  -0- border   thickness      H  -inset- border -inset-               if edges contains  bottom     edges contains  all            addBorder formats   V  border   thickness  -0-     H  -inset- border -inset-               if edges contains  left     edges contains  all            addBorder formats   V  -inset- border -inset-     H  -0- border   thickness                if edges contains  right     edges contains  all            addBorder formats   V  -inset- border -inset-     H  border   thickness  -0-               return borders           Usage               view addBorder edges    all      All with default arguments      view addBorder edges    top   color   green     Just Top  green  default thickness     view addBorder edges    left   right   bottom   color   red  thickness  3     All except Top  red  thickness 3   With this code you re not tied to your subclass too  you can apply it to anything and everything that inherits from UIView - reusable in your project  and any others  Pass in other arguments to your methods to define other colours and widths  Many options

User · Answer

You can also check this collection of UIKit and Foundation categories  https   github com leszek-s LSCategories  It allows adding border on one side of UIView with single line of code    self someView lsAddBorderOnEdge UIRectEdgeTop color  UIColor blueColor  width 2     and it properly handles view rotation while most of answers posted here do not handle it well

User · Answer

Just posting here to help someone looking for adding borders  I have made a few changes in the accepted answer here  swift label only border left  Changed width in case UIRectEdge Top from CGRectGetHeight self frame  to CGRectGetWidth self frame  and in case UIRectEdge Bottom from UIScreen mainScreen   bounds width to CGRectGetWidth self frame  to get borders correctly  Using Swift 2   Finally the extension is     extension CALayer    func addBorder edge  UIRectEdge  color  UIColor  thickness  CGFloat         let border   CALayer         switch edge       case UIRectEdge Top          border frame   CGRectMake 0  0  CGRectGetWidth self frame   thickness            break     case UIRectEdge Bottom          border frame   CGRectMake 0  CGRectGetHeight self frame  - thickness  CGRectGetWidth self frame   thickness          break     case UIRectEdge Left          border frame   CGRectMake 0  0  thickness  CGRectGetHeight self frame           break     case UIRectEdge Right          border frame   CGRectMake CGRectGetWidth self frame  - thickness  0  thickness  CGRectGetHeight self frame           break     default          break            border backgroundColor   color CGColor       self addSublayer border

User · Answer

I came up with a solution using Swift 4 1 that uses AutoLayout and UIViews so that it will resize with the view   It is based off  AdamWaite  s answer but solves the issue for table view cells where the cells are reused  If the previous border is not removed before adding a new one  then the reused cell will contain multiple borders   This is solved by creating a dummy BorderView class and searching the subview s for the borders and removing them   This code uses SnapKit for constraints and CocoaLumberjack for debugging  If you are not using these  then it should be fairly straightforward to convert  class BorderView  UIView      extension UIView       private func addSidedBorder toEdge edge  UIRectEdge  withColor color  UIColor  inset  CGFloat  thickness  CGFloat            let border   BorderView frame   zero          border backgroundColor   color         addSubview border           border snp makeConstraints   make in             switch edge               case  top                  make top equalToSuperview                   make height equalTo thickness                  make left right equalToSuperview   inset inset               case  left                  make left equalToSuperview                   make width equalTo thickness                  make top bottom equalToSuperview   inset inset               case  bottom                  make bottom equalToSuperview                   make height equalTo thickness                  make left right equalToSuperview   inset inset               case  right                  make right equalToSuperview                   make width equalTo thickness                  make top bottom equalToSuperview   inset inset               default                  DDLogWarn  Invalid sided border given in ExtendedUIView  border not added correctly                                      func addBorder toEdge edge  UIRectEdge  withColor color  UIColor    black  inset  CGFloat   0 0  thickness  CGFloat   1 0               Remove existing borders from view and readd them         for view in subviews               if view is BorderView                   view removeFromSuperview                                    if edge contains  all                addSidedBorder toEdge   top  withColor  color  inset  inset  thickness  thickness              addSidedBorder toEdge   left  withColor  color  inset  inset  thickness  thickness              addSidedBorder toEdge   bottom  withColor  color  inset  inset  thickness  thickness              addSidedBorder toEdge   right  withColor  color  inset  inset  thickness  thickness            else               if edge contains  top                    addSidedBorder toEdge   top  withColor  color  inset  inset  thickness  thickness                             if edge contains  left                    addSidedBorder toEdge   left  withColor  color  inset  inset  thickness  thickness                             if edge contains  bottom                    addSidedBorder toEdge   bottom  withColor  color  inset  inset  thickness  thickness                             if edge contains  right                    addSidedBorder toEdge   right  withColor  color  inset  inset  thickness  thickness                                    Add this code and then within a class that subclasses UIView  call   view addBorder toEdge    left   right   withColor   red  inset  0 0  thickness  1 0

User · Answer

Swift 4 2 and AutoLayout  I went through the offered solutions  Many are based in frames This is a simple extension that works with AutoLayout - use View instead of Layer to make sure we can use AutoLayout - Single subview with 4 constraints  Use as follows   self addBorder  bottom  color   lightGray  thickness  0 5    extension UIView       func addBorder   edge  UIRectEdge  color  UIColor  thickness  CGFloat            let subview   UIView           subview translatesAutoresizingMaskIntoConstraints   false         subview backgroundColor   color         self addSubview subview          switch edge           case  top   bottom              subview leftAnchor constraint equalTo  self leftAnchor  constant  0  isActive   true             subview rightAnchor constraint equalTo  self rightAnchor  constant  0  isActive   true             subview heightAnchor constraint equalToConstant  thickness  isActive   true             if edge     top                   subview topAnchor constraint equalTo  self topAnchor  constant  0  isActive   true               else                   subview bottomAnchor constraint equalTo  self bottomAnchor  constant  0  isActive   true                       case  left   right              subview topAnchor constraint equalTo  self topAnchor  constant  0  isActive   true             subview bottomAnchor constraint equalTo  self bottomAnchor  constant  0  isActive   true             subview widthAnchor constraint equalToConstant  thickness  isActive   true             if edge     left                   subview leftAnchor constraint equalTo  self leftAnchor  constant  0  isActive   true               else                   subview rightAnchor constraint equalTo  self rightAnchor  constant  0  isActive   true                       default              break

User · Answer

I took both Adam Waite s and Pauls answers and combined them  I also added the possibility to pipe the selected edges together  so you need to call only one function like so    self view addBordersToEdge  UIRectEdgeLeft UIRectEdgeRight                    withColor  UIColor grayColor                     andWidth 1 0     or so    self view addBordersToEdge  UIRectEdgeAll                    withColor  UIColor grayColor                     andWidth 1 0     What you need to implement is  a category on UIView as suggested in other answers with the following implementation   -  void addBordersToEdge  UIRectEdge edge withColor  UIColor   color andWidth  CGFloat  borderWidth       if  edge  amp  UIRectEdgeTop            UIView  border    UIView new           border backgroundColor   color           border setAutoresizingMask UIViewAutoresizingFlexibleWidth   UIViewAutoresizingFlexibleBottomMargin           border frame   CGRectMake 0  0  self frame size width  borderWidth            self addSubview border              if  edge  amp  UIRectEdgeLeft            UIView  border    UIView new           border backgroundColor   color          border frame   CGRectMake 0  0  borderWidth  self frame size height            border setAutoresizingMask UIViewAutoresizingFlexibleHeight   UIViewAutoresizingFlexibleRightMargin            self addSubview border              if  edge  amp  UIRectEdgeBottom            UIView  border    UIView new           border backgroundColor   color           border setAutoresizingMask UIViewAutoresizingFlexibleWidth   UIViewAutoresizingFlexibleTopMargin           border frame   CGRectMake 0  self frame size height - borderWidth  self frame size width  borderWidth            self addSubview border              if  edge  amp  UIRectEdgeRight            UIView  border    UIView new           border backgroundColor   color           border setAutoresizingMask UIViewAutoresizingFlexibleHeight   UIViewAutoresizingFlexibleLeftMargin           border frame   CGRectMake self frame size width - borderWidth  0  borderWidth  self frame size height            self addSubview border

User · Answer

Here s a simple solution  Add a label onto your UIView  clear the text on the label and set the label background color to be your border color  Set the origin  x y  of your label to be the origin  x y  of your view  and set the width of the label to be the width of your UIView  set the height to be 1 or 2  for your border height at the top of your UIView   And that should do the trick

[ios] How to add a border just on the top side of a UIView

Examples related to ios

Examples related to objective-c

Examples related to xcode

Examples related to uiview

Examples related to border