How to remove right and left borders in UIButton?

Question

I am using Swift 2.3 now. I've added borders to the button with this code:

self.history.layer.borderWidth = 1
self.history.layer.borderColor = UIColor.mainColor().CGColor

And as a result I got:

Now, I need to remove left and right borders and have only top and bottom borders left. How can I manage it?

Additions: thnx to @Teja, I've seen another question CALayer: add a border only at one side But, the thing is I need bottom and top. However, after adding -1, -1 CALayer only the bottom one has been added.

Possible duplicate of [CALayer: add a border only at one side](http://stackoverflow.com/questions/7022656/calayer-add-a-border-only-at-one-side) — Teja Nandamuri, Oct 13 '16 at 20:16

score 5 · Accepted Answer · answered Oct 13 '16 at 21:09

5

You could try something like below.

let topBorder = CALayer()
topBorder.borderColor = UIColor.black.cgColor;
topBorder.borderWidth = 1;
topBorder.frame = CGRect(x: 0, y: 0, width: label.frame.width, height: 1)
label.layer.addSublayer(topBorder)

let bottomBorder = CALayer()
bottomBorder.borderColor = UIColor.black.cgColor;
bottomBorder.borderWidth = 1;
bottomBorder.frame = CGRect(x: 0, y: label.frame.height, width: label.frame.width, height: 1)
label.layer.addSublayer(bottomBorder)

answered Oct 13 '16 at 21:09

Thank you! Exactly that's what I did – Anuar Maratkhan Oct 13 '16 at 21:12
This code helped a lot. Thank you for the solution. – Badrinath Aug 24 '19 at 06:17

score 1 · Answer 2 · answered Oct 13 '16 at 21:11

I've solved my problem by adding this two CALayers:

let bottomBorder: CALayer = CALayer()
let topBorder: CALayer = CALayer()
bottomBorder.borderColor = UIColor.mainColor().CGColor
topBorder.borderColor = UIColor.mainColor().CGColor
bottomBorder.borderWidth = 1
topBorder.borderWidth = 1
bottomBorder.frame =  CGRectMake(0, CGRectGetHeight(history.frame), CGRectGetWidth(history.frame), 1)
topBorder.frame = CGRectMake(0, 0, CGRectGetWidth(history.frame), 1)
history.layer.addSublayer(bottomBorder)
history.layer.addSublayer(topBorder)

Great thanks to @Teja and @Rajan!

score 1 · Answer 3 · edited Dec 20 '19 at 00:22

You can add several layers instead of border, but you cannot affect corner radius to these like border, by the way here is just add borders to your project

import UIKit

extension UIView {

    func drawBorder(edges: [UIRectEdge], borderWidth: CGFloat, color: UIColor) {
        for item in edges {
            let borderLayer: CALayer = CALayer()
            borderLayer.borderColor = color.cgColor
            borderLayer.borderWidth = borderWidth
            switch item {
            case .top:
                borderLayer.frame = CGRect(x: 0, y: 0, width: frame.width, height: borderWidth)
            case .left:
                borderLayer.frame =  CGRect(x: 0, y: 0, width: borderWidth, height: frame.height)
            case .bottom:
                borderLayer.frame = CGRect(x: 0, y: frame.height - borderWidth, width: frame.width, height: borderWidth)
            case .right:
                borderLayer.frame = CGRect(x: frame.width - borderWidth, y: 0, width: borderWidth, height: frame.height)
            case .all:
                drawBorder(edges: [.top, .left, .bottom, .right], borderWidth: borderWidth, color: color)
            default:
                break
            }
            self.layer.addSublayer(borderLayer)
        }
    }
}

score 1 · Answer 4 · answered Oct 15 '19 at 09:26

[SWIFT 4.2]

I was trying to show that the bottom border to have this result :

I improved the extension of the post above to add the margins..

extension UIButton {

     func drawBorder(edges: [UIRectEdge], borderWidth: CGFloat, color: UIColor, margin: CGFloat) {
        for item in edges {
            let borderLayer: CALayer = CALayer()
            borderLayer.borderColor = color.cgColor
            borderLayer.borderWidth = borderWidth
            switch item {
            case .top:
                borderLayer.frame = CGRect(x: margin, y: 0, width: frame.width - (margin*2), height: borderWidth)
            case .left:
                borderLayer.frame =  CGRect(x: 0, y: margin, width: borderWidth, height: frame.height - (margin*2))
            case .bottom:
                borderLayer.frame = CGRect(x: margin, y: frame.height - borderWidth, width: frame.width - (margin*2), height: borderWidth)
            case .right:
                borderLayer.frame = CGRect(x: frame.width - borderWidth, y: margin, width: borderWidth, height: frame.height - (margin*2))
            case .all:
                drawBorder(edges: [.top, .left, .bottom, .right], borderWidth: borderWidth, color: color, margin: margin)
            default:
                break
            }
            self.layer.addSublayer(borderLayer)
        }
    }

}

Use :

mybutton.drawBorder(edges: [.bottom], borderWidth: 1, color: UIColor.darkGray, margin: 20)

It's works perfectly :)

score 0 · Answer 5 · answered Dec 18 '18 at 23:28

Another way of doing this is to add UIView as borders with height or width as a borderWidth. You can add them all hide/show depend on your use or only add top and bottom view for it.

This is really useful if you are not programmatically creating the view and need to use constraints.

How to remove right and left borders in UIButton?

5 Answers5