Styling a CSS Textarea (resize, rows, and autosize)
How to style a textarea with CSS - control resizing, set sizing with rows and CSS, fix common quirks, and build a clean autosizing field.
6 min read - Updated 2026-06-18
A textarea is just a multi-line text input, but it has its own quirks: a default resize handle, rows-based sizing, and inconsistent padding across browsers. Here is how to bring it fully under CSS control.
Control the resize handle
By default a textarea can be dragged to resize, which often breaks careful layouts. The resize property gives you full control over that behavior.
resize: none disables dragging entirely
resize: vertical allows height changes only - the safest default
resize: both is the browser default
Pair with min-height and max-height to bound the range
Size it with rows and CSS
The rows attribute sets an initial line count, but CSS height wins for precise control. Use both deliberately so the field looks right before and after styles load.
rows gives a sensible default height without CSS
height or min-height in CSS sets a precise size
Use line-height and padding for comfortable text spacing
field-sizing: content enables native autosizing where supported
Fix common quirks
Textareas inherit a few browser defaults that look off until you reset them. A small base of styles makes them match the rest of your form.
Set font-family: inherit so it matches your inputs
Normalize padding and border for cross-browser consistency
box-sizing: border-box keeps width predictable
Style :focus and :disabled states like your other fields
Release checklist
Decide on a resize policy (none / vertical / both).
Set sizing with rows plus min-height for resilience.
Inherit font-family and normalize padding.
Style focus and disabled states to match other inputs.
Frequently asked questions
How do I stop a textarea from being resizable?
Set resize: none in CSS. If you still want users to grow the field vertically but not horizontally, use resize: vertical, which is usually the better choice for layout stability.
How do I set the size of a textarea?
Use the rows attribute for a default line count and CSS height or min-height for precise control. Combining both gives a good size before and after your stylesheet loads.
How do I make a textarea auto-grow with content?
Modern browsers support field-sizing: content, which makes the textarea grow with its text. Where that is unsupported, a small script that syncs height to scrollHeight on input achieves the same effect.
Related guides
Benji
Your life OS
The companion app that keeps every area of your world in sync.
Zero to Shipped
Ship products, not side projects
The ultimate Next.js boilerplate for building and launching real products.
DMX
Mindful Twitter/X
The intentional X client for macOS. Reclaim your attention span.
Sotto
Voice-to-text for macOS
Speak naturally. Type instantly. 100% local & private.
Passlock
Password manager with willpower
Lock passwords with time delays, word challenges, or hand the keys to someone you trust.
Glink
Changelogs that slap
Beautiful changelogs and roadmaps for your product.
JoinRepo
GitHub access control
Monetize your GitHub repositories with ease.
Tubely
YouTube Studio for Mac
Manage multiple YouTube channels in one native app.
JustWrite
Distraction-free writing
A minimal writing app that helps you focus on what matters.