CSS resize Property

Definition and Usage

The resize property sets whether an element is user-resizable, and if so, in which directions. Browsers usually show a small drag handle (often at the corner).

The initial value is none. It does not apply to inline elements, or to blocks whose overflow is visible or clip. Set overflow to auto, scroll, or hidden first. Textareas already scroll, so they resize easily.

CSS Syntax

Property Values

How to Use resize

Make the box eligible, then choose the resize direction.

1. Use a block box (or a form control like textarea), not an inline span.
2. Set overflow to auto, scroll, or hidden (skip this for textarea — it already scrolls).
3. Give a starting width / height so there is a clear size to drag from.
4. Set resize to both, horizontal, vertical, or a logical keyword. Cap growth with max-width / max-height when needed.

Live Preview

Drag the handle on the box (usually the bottom-right corner). Change resize and compare directions.

CSS Examples

Each snippet focuses on resize. overflow and a starting size are only there so the handle works. Use Try It Yourself for a live editor.

<style>
  div {
    width: 180px;
    height: 80px;
    overflow: auto;
    resize: both;
    border: 1px solid #cbd5e1;
    padding: 8px;
  }
</style>

<div>Drag the corner to resize both ways.</div>

<style>
  textarea {
    width: 220px;
    height: 80px;
    resize: vertical;
  }
</style>

<textarea>Resize me up and down only.</textarea>

<style>
  textarea {
    width: 220px;
    height: 80px;
    resize: none;
  }
</style>

<textarea>No drag handle on this field.</textarea>

Key Takeaways