198

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!

16 Answers 16

446

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;
3
  • 7
    Also works with the "User Defined Runtime Attributes" inspector
    – Avi Cherry
    May 7, 2013 at 8:43
  • 1
    Works for swift also! Just change YES to true. May 23, 2017 at 17:03
  • in 2023 you don't import anything
    – Fattie
    Feb 22, 2023 at 14:05
134

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

  1. create category class of CALayer

  2. in h file

    @property(nonatomic, assign) UIColor* borderIBColor;
    
  3. 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

updated answer

thanks

6
  • 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, 2016 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, 2016 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, 2016 at 19:35
  • 1
    What about Swift? Aug 25, 2016 at 7:28
  • 1
    @JayprakashDubey i create extension of CALayer. Oct 7, 2016 at 7:43
15

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

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

enter image description here

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

0
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:

DCKit: rounded button

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

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
8

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;
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
3

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()
3

enter image description here

For Objective C:

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

For Swift:

submitButton.layer.cornerRadius = 5
submitButton.clipsToBounds = true
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.

0
2

For Swift:

button.layer.cornerRadius = 10.0
2

updated for Swift 3 :

used below code to make UIButton corner round:

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

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 
    }
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

1

For iOS SWift 4

button.layer.cornerRadius = 25;
button.layer.masksToBounds = true;
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;
        }
    }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.