iOS Development
Cocoa Touch
UIView
Border Customization
Swift Programming

Cocoa Touch How To Change UIView's Border Color And Thickness?

Master System Design with Codemia

Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.

Introduction

UIView does not expose border settings directly on the view itself. Border appearance is controlled through the underlying CALayer, which is why the solution usually involves view.layer.borderWidth and view.layer.borderColor.

Change a border with CALayer

Every UIView has a backing layer. That layer is responsible for low-level drawing attributes such as borders, corner radius, shadows, and transforms.

In Swift, the basic setup looks like this:

swift
1import UIKit
2
3let cardView = UIView(frame: CGRect(x: 20, y: 20, width: 200, height: 100))
4cardView.backgroundColor = .systemBackground
5
6cardView.layer.borderWidth = 2
7cardView.layer.borderColor = UIColor.systemBlue.cgColor

Two details matter here:

  • 'borderWidth uses points, not pixels'
  • 'borderColor expects a CGColor, not a UIColor'

That is why .cgColor is required.

Apply border styling in a custom view

If the same style should be applied every time a view is created, place it in a subclass rather than repeating border code across controllers.

swift
1import UIKit
2
3final class BorderedView: UIView {
4    override init(frame: CGRect) {
5        super.init(frame: frame)
6        configureAppearance()
7    }
8
9    required init?(coder: NSCoder) {
10        super.init(coder: coder)
11        configureAppearance()
12    }
13
14    private func configureAppearance() {
15        layer.borderWidth = 1.5
16        layer.borderColor = UIColor.systemGreen.cgColor
17        layer.cornerRadius = 12
18        backgroundColor = .secondarySystemBackground
19    }
20}

This approach keeps the styling logic close to the view and makes Interface Builder and programmatic layouts behave consistently.

Update border color dynamically

You can also change border appearance in response to state changes such as validation, focus, or selection.

swift
1func setValidationState(isValid: Bool, for view: UIView) {
2    view.layer.borderWidth = 2
3    view.layer.borderColor = isValid
4        ? UIColor.systemGreen.cgColor
5        : UIColor.systemRed.cgColor
6}

That pattern is common for form fields, cards, and custom controls. If the border is tied to user interaction, update it on the main thread because UIKit is not thread-safe.

Interface Builder and @IBInspectable

If designers or other developers need to change border styling in Interface Builder, expose the properties through @IBInspectable.

swift
1import UIKit
2
3@IBDesignable
4final class InspectableBorderView: UIView {
5    @IBInspectable var borderWidth: CGFloat = 0 {
6        didSet { layer.borderWidth = borderWidth }
7    }
8
9    @IBInspectable var borderColor: UIColor = .clear {
10        didSet { layer.borderColor = borderColor.cgColor }
11    }
12
13    @IBInspectable var cornerRadius: CGFloat = 0 {
14        didSet { layer.cornerRadius = cornerRadius }
15    }
16}

Now the border can be changed visually in storyboard or xib files without writing controller code for every instance.

Border thickness, corner radius, and clipping

Borders usually look better when they match the corner radius of the view. If you are rounding corners, set the radius on the same layer that owns the border.

swift
1profileImageView.layer.cornerRadius = 24
2profileImageView.layer.borderWidth = 3
3profileImageView.layer.borderColor = UIColor.white.cgColor
4profileImageView.clipsToBounds = true

clippedToBounds or masksToBounds is often needed when the view’s content should follow the rounded corners. Without it, the border may be rounded while the content still draws as a rectangle.

Common Pitfalls

The most common mistake is assigning a UIColor directly to borderColor. The layer expects CGColor, so the correct form is UIColor.red.cgColor.

Another issue is changing border appearance before the view hierarchy is fully set up, then assuming Auto Layout broke something. Border width and color do not depend on layout, but related styling such as shadows, masks, or custom paths sometimes does. If appearance depends on final bounds, move that work to layoutSubviews().

Developers also forget about retina scaling and choose border widths like 0.3 or 0.7, which can render inconsistently. Whole-number or half-point widths usually look cleaner.

Finally, watch the interaction between rounded corners and shadows. A layer with masking enabled clips its shadow. If you need both a clipped rounded content area and a shadow, use a wrapper view: one layer for the shadow, another for the clipped border.

Summary

  • Change a UIView border through its layer.
  • Use borderWidth for thickness and borderColor with a CGColor.
  • Put reusable border styling in a custom view or helper method.
  • '@IBInspectable is useful when the border should be configurable in Interface Builder.'
  • Coordinate border settings with corner radius and clipping so the final result renders correctly.

Course illustration
Course illustration

All Rights Reserved.