Limited supportMost useful on textareas and user-controlled regions where more room can improve comfort.
Interaction Limited support

resize (CSS property)

resize controls whether users can resize elements such as textareas and in which directions. It balances author layout intent with user control over reading and input space.

InteractionResizingText input

Overview

resize controls whether users can resize elements such as textareas and in which directions. It balances author layout intent with user control over reading and input space.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
resize
1
79
4
3
18
block
118
118
63
16
118
block level support

Support on block level, replaced, table cell, or inline block elements
4
79
5
4
18
inline
118
118
63
16
118
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
  • The property is recognized, but has no effect. See bug 211994.
Notes 1 item(s)
Implementation note
  • `resize` doesn't have any effect on `<iframe>`. See bug 680823)

Syntax

CSS 
textarea {
  resize: vertical;
}
.panel {
  resize: horizontal;
  overflow: auto;
}

Live demo

vertical

CSS Vertical demo.

PreviewFullscreen

horizontal

CSS Horizontal demo.

PreviewFullscreen

both

CSS Both demo.

PreviewFullscreen

Use cases

  • Expandable textareas

    Let users enlarge message or note fields when they need more writing space.

  • Adjustable panels

    Allow utility panes or preview regions to grow when more space improves the task.

Cautions

  • Disabling resize everywhere can frustrate users who need more space to read or write comfortably.
  • Resizable areas still need sensible min/max bounds so they do not break the surrounding layout.

Accessibility

  • User control over writing space can improve comfort for people with low vision, zoom, or motor needs.

Related links

Powered by web-features