1 px bordered UIBezierPath(roundedRect:byRoundingCorners:)

Question

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:

I looks like maybe the layer is being clipped to the bounds, only showing half of the stroke along the edges. — David Rönnqvist, Sep 19 '18 at 08:41
I tested it in iOS 10 and nothing wrong. https://imgur.com/a/J7RB7EI — Quoc Nguyen, Sep 19 '18 at 08:51
@QuocNguyen OK, maybe caused by a superview clipping. It was a UITableViewCell. JonJ solution to inset the path solved my issue. — Cœur, Sep 19 '18 at 09:05

JonJ · Accepted Answer · 2018-09-19T09:00:15.287

4

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

edited Sep 19 '18 at 09:00

answered Sep 19 '18 at 08:41

JonJ

1,061
6
8

1

Wouldn't you rather inset the rounded rectangle path than the frame of the shape layer? – David Rönnqvist Sep 19 '18 at 08:58
Updated answer. – JonJ Sep 19 '18 at 09:00
`clipsToBounds = false` and `masksToBounds = false` didn't solve anything by the way (maybe due to some superview restrictions), so the key here was to have an inset. Thank you. – Cœur Sep 19 '18 at 09:02
`bounds.insetBy(dx: 0.5, dy: 0.5)` works even better. – Cœur Sep 19 '18 at 09:12
1

Your insets will of course depend on your line width. 50% of it for best result. – JonJ Sep 19 '18 at 09:14

1 px bordered UIBezierPath(roundedRect:byRoundingCorners:)

1 Answers1