Search code examples
iosswiftuibezierpathrounded-cornerscashapelayer

1 px bordered UIBezierPath(roundedRect:byRoundingCorners:)


How to get a clean 1 px border for a UIBezierPath with different rounded corners?

In the below example, I have use 3 corners. Code is inside a UIView:

let borderLayer = CAShapeLayer()
borderLayer.frame = bounds
borderLayer.path = UIBezierPath(roundedRect: bounds, byRoundingCorners: [.topRight, .bottomLeft, .bottomRight], cornerRadii: CGSize(width: 24, height: 24)).cgPath
borderLayer.fillColor = UIColor.clear.cgColor
borderLayer.lineWidth = 1
borderLayer.strokeColor = UIColor.white.cgColor
layer.addSublayer(borderLayer)

The result has width issues in angles:

enter image description here


Solution

  • Inset by 1 pixel, or set clipsToBounds = false in your UIView.

    let insetBounds = bounds.insetBy(dx: 1.0, dy: 1.0)
    borderLayer.path = UIBezierPath(roundedRect: insetBounds, byRoundingCorners: [.topRight, .bottomLeft, .bottomRight], cornerRadii: CGSize(width: 24, height: 24)).cgPath