title: Drawing Rounded Corners Using UIBezierPath
body: <p>I have a design element that I'm having trouble figuring out; hoping someone may be able to point me in the right direction.  The element I am trying to build is like so;</p>
  
  <p><a href="https://i.stack.imgur.com/wFDge.png" rel="noreferrer"><img src="https://i.stack.imgur.com/wFDge.png" alt="Rounded Button With No Bottom Border"></a></p>
  
  <p>Effectively, it's a rounded rectangle with a stroke on the left, top, and right sides (the bottom should have no stroke).</p>
  
  <p>I've dabbled in using the following code;</p>
  
  <pre><code>// Create the rounded rectangle
  let maskPath = UIBezierPath(roundedRect: myView.bounds, byRoundingCorners: [.topLeft, .topRight], cornerRadii: CGSize(width: 4.0, height: 4.0))
  
  // Setup a shape layer
  let shape = CAShapeLayer()
  
  // Create the shape path
  shape.path = maskPath.cgPath
  
  // Apply the mask
  myView.layer.mask = shape
  </code></pre>
  
  <p>Subsequently, I'm using the following to draw the stroke around the rect;</p>
  
  <pre><code>// Add border
  let borderLayer = CAShapeLayer()
  borderLayer.path = maskPath.cgPath
  borderLayer.fillColor = UIColor.clear.cgColor
  borderLayer.strokeColor = UIColor.white.cgColor
  borderLayer.lineWidth = 2.0
  borderLayer.frame = self.bounds
  self.layer.addSublayer(borderLayer)
  </code></pre>
  
  <p>This results in the following image;</p>
  
  <p><a href="https://i.stack.imgur.com/G3zbd.png" rel="noreferrer"><img src="https://i.stack.imgur.com/G3zbd.png" alt="Rounded Rect with Stroke"></a></p>
  
  <p>I've not been able to figure out how to either <em>remove the bottom stroke</em> or <em>draw the item using a UIBezierPath()</em>, but rounding the corners in a way that would be identical to the rounded rect (I'm using another rounded rect in the same view for a different purpose, and the rounded corners would need to be identical).</p>
  
  <p>Thanks!</p>