UITextView
iOS Development
Rounded Rect
UIKit
Swift Programming

How to style UITextView to like Rounded Rect text field?

Interview Questions practice on Codemia

Over 8,000 real interview questions from top companies, searchable by company and role.

Browse interview questions

Introduction

UITextView does not have the built-in rounded-rect appearance that UITextField used to expose directly, but you can recreate that look with a few UIKit properties. The key pieces are border styling, corner radius, internal padding, and optional placeholder behavior so the control still feels like a polished form input.

Basic Rounded-Rect Styling

The visual shell mostly comes from the view’s layer.

swift
1import UIKit
2
3final class NotesViewController: UIViewController {
4    private let notesView = UITextView()
5
6    override func viewDidLoad() {
7        super.viewDidLoad()
8        view.backgroundColor = .systemBackground
9
10        notesView.translatesAutoresizingMaskIntoConstraints = false
11        notesView.font = .preferredFont(forTextStyle: .body)
12        notesView.backgroundColor = .secondarySystemBackground
13        notesView.layer.cornerRadius = 10
14        notesView.layer.borderWidth = 1
15        notesView.layer.borderColor = UIColor.systemGray4.cgColor
16        notesView.textContainerInset = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
17
18        view.addSubview(notesView)
19
20        NSLayoutConstraint.activate([
21            notesView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
22            notesView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
23            notesView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 24),
24            notesView.heightAnchor.constraint(equalToConstant: 140)
25        ])
26    }
27}

This gives the text view a multiline text-field feel while keeping normal UITextView editing behavior.

Why Insets Matter

A rounded border without padding usually looks wrong because the text starts too close to the edge. textContainerInset is what makes the control feel comfortable rather than cramped.

That is one of the main visual differences between a quick hack and a production-ready control.

Adding a Focus State

Rounded text fields typically highlight when editing begins. You can mirror that behavior with UITextViewDelegate.

swift
1extension NotesViewController: UITextViewDelegate {
2    func textViewDidBeginEditing(_ textView: UITextView) {
3        textView.layer.borderColor = UIColor.systemBlue.cgColor
4        textView.layer.borderWidth = 1.5
5    }
6
7    func textViewDidEndEditing(_ textView: UITextView) {
8        textView.layer.borderColor = UIColor.systemGray4.cgColor
9        textView.layer.borderWidth = 1
10    }
11}

And in viewDidLoad:

swift
notesView.delegate = self

This small change makes the control feel much closer to a native form field.

Placeholder Support

UITextView does not provide a placeholder property, so if you want the same experience users expect from a text field, add a label-based placeholder.

swift
1final class PlaceholderTextView: UITextView {
2    private let placeholderLabel = UILabel()
3
4    var placeholder: String = "" {
5        didSet { placeholderLabel.text = placeholder }
6    }
7
8    override var text: String! {
9        didSet { placeholderLabel.isHidden = !text.isEmpty }
10    }
11
12    override func layoutSubviews() {
13        super.layoutSubviews()
14        placeholderLabel.frame = CGRect(x: 14, y: 12, width: bounds.width - 28, height: 20)
15    }
16
17    override func didMoveToWindow() {
18        super.didMoveToWindow()
19        if placeholderLabel.superview == nil {
20            placeholderLabel.textColor = .placeholderText
21            placeholderLabel.font = font
22            addSubview(placeholderLabel)
23        }
24        placeholderLabel.isHidden = !text.isEmpty
25    }
26}

That gives you the form-field hint text that many users expect.

Dark Mode and Dynamic Type

Do not hard-code light-only colors if the app supports modern system themes. Prefer semantic colors such as:

  • 'systemBackground'
  • 'secondarySystemBackground'
  • 'systemGray4'
  • 'placeholderText'

Also prefer preferredFont(forTextStyle:) so the text view works better with Dynamic Type.

Error Styling

If the text view participates in validation, keep error styling explicit and reusable.

swift
1extension UITextView {
2    func applyValidationState(isError: Bool) {
3        layer.borderColor = isError ? UIColor.systemRed.cgColor : UIColor.systemGray4.cgColor
4        layer.borderWidth = isError ? 1.5 : 1
5    }
6}

That keeps the appearance consistent across screens instead of scattering ad hoc color changes through controllers.

Common Pitfalls

One common mistake is setting only cornerRadius and calling the job done. Without border color, width, and insets, the result usually does not feel like a rounded text field.

Another issue is implementing placeholder text but forgetting to hide it when the text is set programmatically.

A third pitfall is using fixed colors that look fine in light mode and unreadable in dark mode.

Summary

  • Style UITextView with layer border, corner radius, and text container insets.
  • Add a focus-state border change so editing feels like a form field.
  • Use a placeholder label if you want text-field-like hint behavior.
  • Prefer semantic UIKit colors and Dynamic Type-friendly fonts.
  • Keep validation and styling helpers reusable across the app.

Related reading
Free course
Beginner
7 lessons
2 hours
Tackling System Design Interview Problems

A short course that equips you with the skills to approach system design interviews methodically.

Start the free course
Track what you have practised

A free account saves your progress, solutions and study plan across every problem on Codemia.

Interview Questions practice on Codemia

Over 8,000 real interview questions from top companies, searchable by company and role.

Browse interview questions

All Rights Reserved.