Specify border radius of UITextField in Swift

Question

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?

"corner radius" or "border width", which one? there's no border radius, just helping you clarify here. — Larry Pickles, Nov 30 '15 at 21:06

FredLoh · Accepted Answer · 2018-06-11T15:45:51.357

83

You can use:

nameOfTextField.layer.cornerRadius = 15.0
nameOfTextField.layer.borderWidth = 2.0
nameOfTextField.layer.borderColor = UIColor.red.cgColor

edited Jun 11 '18 at 15:45

answered Nov 30 '15 at 21:06

FredLoh

1,804
18
27

for later versions of swift `UIColor.red.cgColor` – Daniel George Jun 10 '18 at 00:21

score 26 · Answer 2 · answered Feb 05 '16 at 00:57

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.

answered Feb 05 '16 at 00:57

Jason Newell

591
6
11

4

This is the best method since you don't let UI code living in the Controller. – RHaguiuda Feb 08 '18 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 ? – GeekyDeveloper Dec 24 '20 at 18:38
This has its limitation though. Sometimes You want to round things based on some other things. – Whirlwind Mar 01 '22 at 11:14

score 16 · Answer 3 · answered Jul 11 '18 at 08:31

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

answered Jul 11 '18 at 08:31

Diptee Parmar

179
1
3

score 4 · Answer 4 · answered Nov 30 '15 at 21:12

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.

Faiz Ul Hassan · Answer 5 · 2022-01-25T12:32:31.287

4

in Swift 5

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

edited Jan 25 '22 at 12:32

answered Dec 27 '20 at 19:11

Faiz Ul Hassan

191
1
5

Drashti Savaliya · Answer 6 · 2022-03-01T03:08:10.477

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

}

edited Mar 01 '22 at 03:08

answered Feb 23 '22 at 06:10

Drashti Savaliya

41
2

score 1 · Answer 7 · answered Nov 30 '15 at 21:09

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

answered Nov 30 '15 at 21:09

hgcahez

413
6
20

score 1 · Answer 8 · answered Jun 18 '20 at 09:21

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

answered Jun 18 '20 at 09:21

Trần Hữu Hiền

872
1
9
22

Diptee Parmar · Answer 9 · 2018-07-11T10:30:45.787

0

To Create borderWidth of Textfield below answer is correct:

swift 3

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

edited Jul 11 '18 at 10:30

answered Jul 11 '18 at 08:46

Diptee Parmar

179
1
3

score 0 · Answer 10 · answered Apr 04 '20 at 14:10

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

Specify border radius of UITextField in Swift

10 Answers10