resize

resize controls a browser-provided user resizing mechanism. It commonly applies to textareas and to boxes whose overflow is not visible or clip. It does not make arbitrary text inputs into resizable textareas.

Resize vertically

On a browser with a resize handle, drag the textarea’s lower edge or corner. The label remains associated, the width stays bounded, and the height can grow.

<label for="notes">Practice notes</label><br /><textarea
  id="notes"
  name="notes"
>
Write what changed in your example.</textarea>

textarea {
  box-sizing: border-box;
  width: 100%;
  max-width: 22rem;
  min-height: 6rem;
  resize: vertical;
  padding: 0.5rem;
}

Resize a scrollable reading region

Both axes can change within the minimum and maximum constraints. Overflow:auto keeps longer content reachable when the region becomes smaller.

<h2 id="region-title">Notes</h2>
<div class="notes" tabindex="0" role="region" aria-labelledby="region-title">
  <p>Read the source.</p>
  <p>Change one value.</p>
  <p>Compare the result.</p>
  <p>Try another size.</p>
</div>

.notes {
  resize: both;
  overflow: auto;
  width: 12rem;
  height: 6rem;
  min-width: 8rem;
  min-height: 4rem;
  max-width: 100%;
  border: 1px solid #94a3b8;
  padding: 0.5rem;
  box-sizing: border-box;
}

Values and defaults

The initial value is none and resize is not inherited. Browsers commonly give textareas resize:both through their own stylesheet. Auto is not a resize value. Both, horizontal, vertical, block, and inline select allowed directions; the logical directions follow writing mode and have their own compatibility history.

There is no input type=”textarea”. Use the textarea element. Replaced elements and resize-handle behavior vary by browser, and touch interfaces may not expose a handle.

Accessibility and fallback

Treat manual resizing as an optional enhancement. Keep text scrollable and readable when no handle is available; do not make an essential task depend on dragging it. Minimums and maximums constrain the resizing range. Disabling textarea resizing can make long answers harder to edit, so allow useful growth unless there is a specific reason.

Learn overflow, min-height, and max-width to set surrounding constraints.

Sources and browser support

MDN: resize describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.