How to make a simple rounded button in Storyboard?

Question

I just started learning iOS development, cannot find how to make simple rounded button. I find resources for old versions. Do I need to set a custom background for a button? In Android, I would just use a 9 patch, but I know iOS does not have this capability.

score 274 · Answer 1 · edited Jul 19 '19 at 05:49

274

Short Answer: YES

You can absolutely make a simple rounded button without the need of an additional background image or writing any code for the same. Just follow the screenshot given below, to set the runtime attributes for the button, to get the desired result.

It won't show in the Storyboard but it will work fine when you run the project.

Note:
The 'Key Path' layer.cornerRadius and value is 5. The value needs to be changed according to the height and width of the button. The formula for it is the height of button * 0.50. So play around the value to see the expected rounded button in the simulator or on the physical device. This procedure will look tedious when you have more than one button to be rounded in the storyboard.

edited Jul 19 '19 at 05:49

Randika Vishman

7,983
3
57
80

answered Aug 10 '16 at 14:05

Nishant

12,529
9
59
94

18

Please add a comment when voting in negative. – Nishant Aug 10 '16 at 18:18
10

it is disappointing that IB cannot show this like a run of the mill drawing app. – Cerniuk Mar 05 '17 at 21:11
2

@WilliamCerniuk: Actually it can. Check out http://nshipster.com/ibinspectable-ibdesignable/ – Nishant Mar 06 '17 at 05:39
Setting the User Defined Runtime attributes does indeed work, viewable in the simulator after building. – Cons Bulaquena Jan 23 '18 at 23:02
2

As the accepted answer says, you may also need to add a Boolean key path `clipsToBounds` for this to work. – Max Jun 01 '18 at 16:17
No need to import #import – Parth Patel Dec 27 '18 at 10:54

ChikabuZ · Answer 2 · 2017-04-15T12:07:12.243

96

You can do something like this:

@IBDesignable class MyButton: UIButton
{
    override func layoutSubviews() {
        super.layoutSubviews()

        updateCornerRadius()
    }

    @IBInspectable var rounded: Bool = false {
        didSet {
            updateCornerRadius()
        }
    }

    func updateCornerRadius() {
        layer.cornerRadius = rounded ? frame.size.height / 2 : 0
    }
}

Set class to MyButton in Identity Inspector and in IB you will have rounded property:

edited Apr 15 '17 at 12:07

answered Aug 10 '16 at 14:18

ChikabuZ

10,031
5
63
86

6

By far the best answer. Learned something new today awesome! – Mark Feb 04 '17 at 11:52
2

This answer is not complete. When you launch your app, xCode will use the frame size of the view in interface builder, not the real frame size when the app is running. – Simon Backx Apr 14 '17 at 17:18
2

You can also use "didSet" instead of "willSet" and remove the argument isRounded. – Simon Backx Apr 15 '17 at 09:49
3

If you use a background image, set `layer.masksToBounds = true` also – zontar Nov 02 '17 at 11:01

score 93 · Accepted Answer · answered Aug 10 '16 at 13:17

93

To do it in the storyboard, you need to use an image for the button.

Alternatively you can do it in code:

 btn.layer.cornerRadius = 10
 btn.clipsToBounds = true

answered Aug 10 '16 at 13:17

realtimez

2,525
2
20
24

2

why is clipsToBounds needed? It seems, that shadow doesn't work until I remove it. – Gintas_ Aug 11 '16 at 12:34
1

Good answer, but you can do it in IB, without images. See below. – zontar Nov 02 '17 at 10:54

score 39 · Answer 4 · edited Aug 22 '17 at 06:18

39

Create a Cocoa Touch class.

enter image description here

Insert the code in RoundButton class.

import UIKit

@IBDesignable
class RoundButton: UIButton {

    @IBInspectable var cornerRadius: CGFloat = 0{
        didSet{
        self.layer.cornerRadius = cornerRadius
        }
    }

    @IBInspectable var borderWidth: CGFloat = 0{
        didSet{
            self.layer.borderWidth = borderWidth
        }
    }

    @IBInspectable var borderColor: UIColor = UIColor.clear{
        didSet{
            self.layer.borderColor = borderColor.cgColor
        }
    }
}

Refer the image.

enter image description here

edited Aug 22 '17 at 06:18

Anh Pham

2,108
9
18
29

answered Aug 22 '17 at 03:30

anson

1,436
14
16

Don't know if others ran into this, too, but as soon as I set the class to a button and give it a radius, border width and border color Xcode (9.2) throws an error that there was a rendering error. The app building succeeds but the red "!" keeps being displayed. Just saying... I switched back to the code only solution (although this was really an elegant way). – Aeger Jan 17 '18 at 11:55

score 14 · Answer 5 · answered Feb 27 '18 at 15:13

14

I found the easiest way to do this, is by setting the cornerRadius to half of the height of the view.

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

answered Feb 27 '18 at 15:13

FrankkieNL

711
9
22

No, I did not. If your height and width are the same (so it would have been square), then you would get a circle. But if the width is greater than the height, the button will be correct. – FrankkieNL Mar 20 '18 at 08:55
2

You're right, I missed the image included in the question that shows what the poster was actually after matches your answer more than the accepted answer - upvote – Michael Hudson Mar 20 '18 at 10:46

score 9 · Answer 6 · answered Jan 04 '22 at 15:12

9

Xcode 13 has added an option to do this by adjusting Corner Style Property (under BackgroundConfiguration).

Have to configure the background within Background Config, and then set View Background as default (nothing).

answered Jan 04 '22 at 15:12

hoss24

556
9
22

It should be noted that you need to change your button style from Default to Plain for these options to appear. – Tim Schmidt Apr 11 '23 at 12:17

score 4 · Answer 7 · answered Aug 10 '16 at 13:27

You can connect IBOutlet of yur button from storyboard.

Then you can set corner radius of your button to make it's corner round.

for example, your outlet is myButton then,

Obj - C

 self.myButton.layer.cornerRadius = 5.0 ;

Swift

  myButton.layer.cornerRadius = 5.0

If you want exact round button then your button's width and height must be equal and cornerRadius must be equal to height or width / 2 (half of the width or height).

score 4 · Answer 8 · answered Sep 28 '17 at 03:33

As other answer have suggested to perform most of this work in code only one answer actually provided a way to view your changes in the storyboard IB Interface. My answer goes beyond that answer by allowing you to change the cornerRadius of the view, button, image, etc.

Please take a look at the following code. To use this code create a new swift file called RoundedView or whatever you would like to call it then go to your storyboard and change the class to either "RoundedView", "RoundedImageView" or "RoundedButton".

import UIKit

@IBDesignable class RoundedImage: UIImageView
{
    override func layoutSubviews() {
        super.layoutSubviews()

        updateCornerRadius()
    }

    @IBInspectable var rounded: Bool = false {
        didSet {
            updateCornerRadius()
        }
    }

    @IBInspectable var cornerRadius: CGFloat = 0.1 {
        didSet {
            updateCornerRadius()
        }
    }

    func updateCornerRadius() {
        layer.cornerRadius = rounded ? cornerRadius : 0
        layer.masksToBounds = rounded ? true : false
    }
}

@IBDesignable class RoundedView: UIView
{
    override func layoutSubviews() {
        super.layoutSubviews()

        updateCornerRadius()
    }

    @IBInspectable var rounded: Bool = false {
        didSet {
            updateCornerRadius()
        }
    }

    @IBInspectable var cornerRadius: CGFloat = 0.1 {
        didSet {
            updateCornerRadius()
        }
    }

    func updateCornerRadius() {
        layer.cornerRadius = rounded ? cornerRadius : 0
        layer.masksToBounds = rounded ? true : false
    }
}

@IBDesignable class RoundedButton: UIButton
{
    override func layoutSubviews() {
        super.layoutSubviews()

        updateCornerRadius()
    }

    @IBInspectable var rounded: Bool = false {
        didSet {
            updateCornerRadius()
        }
    }

    @IBInspectable var cornerRadius: CGFloat = 0.1 {
        didSet {
            updateCornerRadius()
        }
    }

    func updateCornerRadius() {
        layer.cornerRadius = rounded ? cornerRadius : 0
        layer.masksToBounds = rounded ? true : false
    }
}

score 4 · Answer 9 · answered Oct 28 '20 at 09:50

4

Follow the screenshot below. It works when you run the simulator (won't see it on preview)

answered Oct 28 '20 at 09:50

Xavier Chia

203
3
5

score 2 · Answer 10 · answered Apr 29 '20 at 06:37

2

I am using Xcode Version 11.4

In the attribute inspector, you can define the corner radius.

It won't show in the Storyboard but it will work fine when you run the project.

answered Apr 29 '20 at 06:37

casillas

16,351
19
115
215

score 2 · Answer 11 · answered Feb 04 '22 at 06:50

2

change background default to custom

then give border radius

result is like this

answered Feb 04 '22 at 06:50

Rasel Khan

2,976
19
25

score 1 · Answer 12 · edited Jul 05 '17 at 15:26

1

While adding layer.cornerRadius in the storyboard make sure that you don't have leading or trailing spaces. If you do copy paste, you might get spaces inserted. Would be nice if XCode say some kind of warning or error.

edited Jul 05 '17 at 15:26

Noam Hacker

4,671
7
34
55

answered Jul 05 '17 at 14:57

venki mohan

11
2

score 1 · Answer 13 · answered Sep 12 '22 at 10:54

1

Alternatively you can do in code on UIKit and iOS 15+

    var config = UIButton.Configuration.filled()
    config.cornerStyle = .capsule
    let btn = UIButton(configuration: config)
    btn.tintColor = .blue

answered Sep 12 '22 at 10:54

Mr.SwiftOak

1,469
3
8
19

score 0 · Answer 14 · answered Feb 19 '20 at 10:16

The extension is the best option for this problem. Create an extension of View or Button

public extension UIView {
  //Round the corners
  func roundCorners(){
    let radius = bounds.maxX / 16
    layer.cornerRadius = radius
  }
}

Call it from the code

button.roundCorners()

score -1 · Answer 15 · answered Aug 10 '16 at 13:19

Try this!!

 override func viewDidLoad() {
   super.viewDidLoad()

   var button = UIButton.buttonWithType(.Custom) as UIButton
   button.frame = CGRectMake(160, 100, 200,40)

   button.layer.cornerRadius =5.0
   button.layer.borderColor = UIColor.redColor().CGColor
   button.layer.borderWidth = 2.0

   button.setImage(UIImage(named:"Placeholder.png"), forState: .Normal)
   button.addTarget(self, action: "OnClickroundButton", forControlEvents: .TouchUpInside)
   button.clipsToBounds = true

   view.addSubview(button)
}
    func OnClickroundButton() {
   NSLog(@"roundButton Method Called");
}

score -1 · Answer 16 · answered Jan 23 '18 at 11:10

import UIKit

@IBDesignable class MyButton: UIButton
{
    override func layoutSubviews() {
        super.layoutSubviews()


    }

    func updateCornerRadius(radius:CGFloat) {
        layer.cornerRadius = radius
    }
    @IBInspectable var cornerRadius:CGFloat = 0{
        didSet{
            updateCornerRadius(radius: cornerRadius)
        }
    }
}

How to make a simple rounded button in Storyboard?

16 Answers16

Linked