41

I would like to programmatically specify the border radius of a UITextField using Swift.

By default, a UITextField has a slight border radius, however I would like to increase it and, after trawling through Interface Builder, I assume this can be done programmatically?

1
  • 1
    "corner radius" or "border width", which one? there's no border radius, just helping you clarify here. Nov 30, 2015 at 21:06

10 Answers 10

83

You can use:

nameOfTextField.layer.cornerRadius = 15.0
nameOfTextField.layer.borderWidth = 2.0
nameOfTextField.layer.borderColor = UIColor.red.cgColor
1
  • for later versions of swift UIColor.red.cgColor Jun 10, 2018 at 0:21
26

If you're using Interface Builder, you can use User Defined Runtime Attributes for the controls you want to modify. At runtime, when the view loads, each attribute you pass a key path for will automatically be set to your value. No need to clutter up your code with little display tweaks.

The picture below should answer your question.

Adding border radius with IB Runtime Attributes

3
  • 4
    This is the best method since you don't let UI code living in the Controller.
    – RHaguiuda
    Feb 8, 2018 at 19:06
  • Exactly what I was looking for. Just curious, can we do the same for the following code: textFieldName.borderStyle = UITextField.BorderStyle.bezel ? Dec 24, 2020 at 18:38
  • This has its limitation though. Sometimes You want to round things based on some other things.
    – Whirlwind
    Mar 1, 2022 at 11:14
16

To Create a Corner Radius of Textfield below answer is correct:

swift 3

YourTextfieldName.layer.cornerRadius = YourTextfieldName.frame.size.height/2
YourTextfieldName.clipsToBounds = true
4

As @SnarfSnarf suggests you can programmatically tune the border widht and corner radius of the text field, _and any other view for the matter, by accessing its layer properties:

nameOfTextField.layer.cornerRadius = 4.0
nameOfTextField.layer.borderWidth = 2.0

On top of that, UITextField has a borderStyle property which you might want to play with. It has four possible values: None, Line, Bezel, and RoundedRect.

Finally have a read through UITextField's documentation, it's always a good way to find out all the possibility a class provides.

4

in Swift 5

yourTxtField.layer.cornerRadius = 18
yourTxtField.layer.masksToBounds = true
3

You can do it with a storyboard too. Just write this extension in your extension file. Then select the text field in the storyboard You will see the option to change the corner radius

extension UIView {

@IBInspectable var cornerRadius: CGFloat {
    get {
        return layer.cornerRadius
    }
    set {
        layer.cornerRadius = newValue
        layer.masksToBounds = newValue > 0
    }
}

} enter image description here

1

try this :yourTxtField.layer.cornerRadius You can also find other methods here https://developer.apple.com/library/prerelease/tvos/documentation/UIKit/Reference/UITextField_Class/index.html

1

This work for me,

  nameOfTextField.layer.cornerRadius = 15.0
  nameOfTextField.layer.borderWidth = 2.0
  nameOfTextField.layer.borderColor = UIColor.brown.cgColor  
  nameOfTextField.layer.masksToBounds = true
0

To Create borderWidth of Textfield below answer is correct:

swift 3

YourTextfieldName!.layer.borderWidth = 1
YourTextfieldName!.layer.borderColor = UIColor.black.cgColor
0

Don't forget to add layer.masksToBound - I think the most popular answer missed that. You need the button to have the same form as its' borders. https://developer.apple.com/documentation/quartzcore/calayer/1410896-maskstobounds

nameOfTextField.layer.cornerRadius = 15.0
nameOfTextField.layer.borderWidth = 0
nameOfTextField.layer.masksToBounds = true

Your Answer

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

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