How to make a rounded oval button?

Question

My goal is to make my button look like this:

minus the black edges around the button.

After reading quite a few posts, I see most solutions saying to use

layer.cornerRadius = 10.0

When I do that I get this:

It rounds the edges, but doesn't give me my desired goal.

Any suggestion?

score 20 · Accepted Answer · edited Oct 22 '16 at 07:38

20

Swift 3

myButton.layer.cornerRadius = myButton.frame.height / 2

myButton.backgroundColor = UIColor.blue
myButton.clipsToBounds = true
myButton.tintColor = UIColor.white
myButton.setTitle("Connect With Facebook", for: .normal)

edited Oct 22 '16 at 07:38

Confused

6,048
6
34
75

answered Oct 21 '16 at 21:19

Rob

2,649
3
27
34

But the frame isn't updated yet if I put it in my view did load so it has a slight incorrect corner radius... – Eric Nov 07 '21 at 08:28

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

1

You Can do it like this (For Example if you button is called button):

button.layer.cornerRadius = button.bounds.size.height / 2.0

answered Oct 21 '16 at 21:31

Mago Nicolas Palacios

2,501
1
15
27

score 1 · Answer 3 · answered Nov 09 '22 at 10:44

From iOS 15 you can have an even better appearance using UIButtonConfiguration by using:

var configuration = UIButton.Configuration.blue()
configuration.cornerStyle = .capsule
configuration.baseForegroundColor = .white
configuration.buttonSize = .large
configuration.title = "Connect With Facebook"

let button = UIButton(configuration: configuration, primaryAction: nil)

The capsule style will give you a much smoother rounding than before.

How to make a rounded oval button?

3 Answers3

Linked