How to round the corners of a button

Question

I have a rectangle image (jpg) and want to use it to fill the background of a button with rounded corner in xcode.

I wrote the following:

UIButton *button = [[UIButton buttonWithType:UIButtonTypeRoundedRect] retain];
CGRect frame = CGRectMake(x, y, cardWidth, cardHeight);
button.frame = frame;
[button setBackgroundImage:backImage forState:UIControlStateNormal];

However, the button I get with that approach doesn't have its corners rounded: it is instead a plain rectangle that looks exactly like my original image. How can I get instead an image with rounded corner to represent my button?

Thanks!

score 445 · Accepted Answer · edited Sep 02 '20 at 21:47

445

I tried the following solution with the UITextArea and I expect this will work with UIButton as well.

First of all import this in your .m file -

#import <QuartzCore/QuartzCore.h>

and then in your loadView method add following lines

    yourButton.layer.cornerRadius = 10; // this value vary as per your desire
    yourButton.clipsToBounds = YES;

edited Sep 02 '20 at 21:47

halfer

19,824
17
99
186

answered Feb 21 '11 at 05:24

devsri

6,173
5
32
40

7

Also works with the "User Defined Runtime Attributes" inspector – Avi Cherry May 07 '13 at 08:43
1

Works for swift also! Just change YES to true. – Andrew Thomas May 23 '17 at 17:03
in 2023 you don't import anything – Fattie Feb 22 '23 at 14:05

Krutarth Patel · Answer 2 · 2016-09-07T10:56:46.200

133

You can achieve by this RunTime Attributes

enter image description here

we can make custom button.just see screenshot attached.

kindly pay attention :

in runtime attributes to change color of border follow this instruction

create category class of CALayer

in h file

@property(nonatomic, assign) UIColor* borderIBColor;

in m file:

-(void)setBorderIBColor:(UIColor*)color {
    self.borderColor = color.CGColor;
}

-(UIColor*)borderIBColor {
    return [UIColor colorWithCGColor:self.borderColor];
}

now onwards to set border color check screenshot

thanks

edited Sep 07 '16 at 10:56

answered May 12 '15 at 08:06

Krutarth Patel

3,407
6
27
54

4

Just me or is the information in the answer incomplete? It doesn't really work. Update: it works as long as I do not specify `borderColor`. But then it always uses black for the borderColor. – Jonny Jan 17 '16 at 13:34
3

Extended answer: The color set in the IB is likely of UIColor type which does not work with borderColor, which is of CGColorRef. Or something like that. So a solution is to create a category on CALayer, with something like `@property(nonatomic, assign) UIColor* borderIBColor;` (which does not clash with some other name) in header file, and the implementation is: `-(void)setBorderIBColor:(UIColor*)color{self.borderColor = color.CGColor;} -(UIColor*)borderIBColor{return [UIColorcolorWithCGColor:self.borderColor];}` – Jonny Jan 17 '16 at 13:49
1

If you don't want a border color, set the borderRadius to 0 and you won't have one! – jungledev Aug 22 '16 at 19:35
1

What about Swift? – Jayprakash Dubey Aug 25 '16 at 07:28
1

@JayprakashDubey i create extension of CALayer. – Krutarth Patel Oct 07 '16 at 07:43
the attributes are : borderWidth, cornerRadius and borderColor more info https://stackoverflow.com/a/45089222/1083128 – Mia Dec 16 '21 at 07:20

score 15 · Answer 3 · answered Dec 29 '15 at 07:22

15

Pushing to the limits corner radius up to get a circle:

    self.btnFoldButton.layer.cornerRadius = self.btnFoldButton.frame.height/2.0;

If button frame is an square it does not matter frame.height or frame.width. Otherwise use the largest of both ones.

answered Dec 29 '15 at 07:22

Javier Calatrava Llavería

9,493
4
53
47

Andrey Gordeev · Answer 4 · 2016-08-30T12:04:37.430

14

You may want to check out my library called DCKit. It's written on the latest version of Swift.

You'd be able to make a rounded corner button/text field from the Interface builder directly:

It also has many other cool features, such as text fields with validation, controls with borders, dashed borders, circle and hairline views etc.

edited Aug 30 '16 at 12:04

answered Nov 01 '15 at 11:44

Andrey Gordeev

30,606
13
135
162

score 10 · Answer 5 · edited Apr 18 '16 at 19:39

10

UIButton* closeBtn = [[UIButton alloc] initWithFrame:CGRectMake(10, 50, 90, 35)];
//Customise this button as you wish then
closeBtn.layer.cornerRadius = 10;
closeBtn.layer.masksToBounds = YES;//Important

edited Apr 18 '16 at 19:39

Sangram Shivankar

3,535
3
26
38

answered Mar 02 '16 at 09:15

Vinay Mahipal

101
1
4

score 8 · Answer 6 · answered Nov 14 '14 at 14:27

Import QuartCore framework if it is not there in your existing project, then import #import <QuartzCore/QuartzCore.h> in viewcontroller.m

UIButton *button = [[UIButton buttonWithType:UIButtonTypeRoundedRect]];
CGRect frame = CGRectMake(x, y, width, height); // set values as per your requirement
button.layer.cornerRadius = 10;
button.clipsToBounds = YES;

iOS Lifee · Answer 7 · 2018-11-24T10:14:59.087

4

First set width=100 and Height=100 of button

Objective C Solution

YourBtn1.layer.cornerRadius=YourBtn1.Frame.size.width/2;
YourBtn1.layer.borderColor=[uicolor blackColor].CGColor;
YourBtn1.layer.borderWidth=1.0f;

Swift 4 Solution

YourBtn1.layer.cornerRadius = YourBtn1.Frame.size.width/2
YourBtn1.layer.borderColor = UIColor.black.cgColor
YourBtn1.layer.borderWidth = 1.0

edited Nov 24 '18 at 10:14

answered Apr 03 '16 at 10:57

iOS Lifee

2,091
23
32

score 3 · Answer 8 · answered Jan 02 '19 at 13:08

Try my code. Here you can set all properties of UIButton like text colour, background colour, corner radius, etc.

extension UIButton {
    func btnCorner() {
        layer.cornerRadius = 10
        clipsToBounds = true
        backgroundColor = .blue
    }
}

Now call like this

yourBtnName.btnCorner()

score 3 · Answer 9 · answered Aug 06 '19 at 04:55

3

For Objective C:

submitButton.layer.cornerRadius = 5;
submitButton.clipsToBounds = YES;

For Swift:

submitButton.layer.cornerRadius = 5
submitButton.clipsToBounds = true

answered Aug 06 '19 at 04:55

Mr.Javed Multani

12,549
4
53
52

score 2 · Answer 10 · answered Apr 03 '14 at 18:20

2

If you want a rounded corner only to one corner or two corners, etc... read this post:

[ObjC] – UIButton with rounded corner - http://goo.gl/kfzvKP

It's a XIB/Storyboard subclass. Import and set borders without write code.

answered Apr 03 '14 at 18:20

elp

8,021
7
61
120

score 2 · Answer 11 · answered Mar 10 '17 at 20:41

2

For Swift:

button.layer.cornerRadius = 10.0

answered Mar 10 '17 at 20:41

pableiros

14,932
12
99
105

score 2 · Answer 12 · answered Aug 16 '17 at 07:36

2

updated for Swift 3 :

used below code to make UIButton corner round:

 yourButtonOutletName.layer.cornerRadius = 0.3 *
        yourButtonOutletName.frame.size.height

answered Aug 16 '17 at 07:36

Kiran Jadhav

3,209
26
29

score 2 · Answer 13 · edited Feb 22 '23 at 14:05

Swift 4 Update

I also tried many options still i wasn't able to get my UIButton round cornered. I added the corner radius code inside the viewDidLayoutSubviews() Solved My issue.

func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        anyButton.layer.cornerRadius = anyButton.frame.height / 2
    }

Also we can adjust the cornerRadius as follows:

func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        anyButton.layer.cornerRadius = 10 //Any suitable number as you prefer can be applied 
    }

score 1 · Answer 14 · answered Oct 18 '18 at 12:10

1

For iOS SWift 4

button.layer.cornerRadius = 25;
button.layer.masksToBounds = true;

answered Oct 18 '18 at 12:10

Jayesh Nai

361
1
4
13

score 1 · Answer 15 · edited May 23 '17 at 12:10

1

An alternative answer which sets a border too (making it more like a button) is here ... How to set rectangle border for custom type UIButton

edited May 23 '17 at 12:10

Community

1
1

answered Oct 17 '11 at 08:18

Andy A

4,191
7
38
56

score 0 · Answer 16 · answered Nov 17 '21 at 07:21

0

You can use outlet connection and didSet function for your button on the view;

 @IBOutlet weak var button: UIButton!{
        didSet {
            button.layer.cornerRadius = 5;
            button.layer.masksToBounds = true;
        }
    }

answered Nov 17 '21 at 07:21

uyarc

579
4
17

How to round the corners of a button

16 Answers16

Swift 4 Update

Linked