UITextField: Bottom Border
<p>I am creating bottom bordered textfield. I am subclass of <code>UITextField</code>. Here it is:</p>

<pre><code> @IBDesignable class LinedTextField: UITextField {

@IBInspectable var borderColor: UIColor = UIColor.whiteColor() {
    didSet {
        let border = CALayer()
        border.borderColor = self.borderColor.CGColor
        border.frame = CGRect(x: 0, y: self.frame.size.height - borderWidth, width:  self.frame.size.width, height: self.frame.size.height)

        border.borderWidth = borderWidth
        self.layer.addSublayer(border)
        self.layer.masksToBounds = true
    }
}

@IBInspectable var borderWidth: CGFloat = 0.5 {
    didSet {
        let border = CALayer()
        border.borderColor = self.borderColor.CGColor
        border.frame = CGRect(x: 0, y: self.frame.size.height - borderWidth, width:  self.frame.size.width, height: self.frame.size.height)

        border.borderWidth = borderWidth
        self.layer.addSublayer(border)
        self.layer.masksToBounds = true
    }
}

override init(frame : CGRect) {
    super.init(frame : frame)
    setup()
}

convenience init() {
    self.init(frame:CGRectZero)
    setup()
}

required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    setup()
}


override func awakeFromNib() {
    super.awakeFromNib()
    setup()
}

override func prepareForInterfaceBuilder() {
    super.prepareForInterfaceBuilder()
    setup()
}

func setup() {
    let border = CALayer()
    border.borderColor = self.borderColor.CGColor
    border.frame = CGRect(x: 0, y: self.frame.size.height - borderWidth, width:  self.frame.size.width, height: self.frame.size.height)

    border.borderWidth = borderWidth
    self.layer.addSublayer(border)
    self.layer.masksToBounds = true
}

override func layoutSubviews() {
    super.layoutSubviews()
}
</code></pre>

<p>Then  in interface builder I set that 2 properties(border colour and border width) and everything looks good:<a href="https://i.stack.imgur.com/vS07Y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vS07Y.png" alt="enter image description here"></a></p>

<p>But when I run application on my real 5.5" device, it looks this way:<a href="https://i.stack.imgur.com/fojaC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fojaC.png" alt="enter image description here"></a></p>

<p>Border is not long as the text field. What's wrong here?</p>