CSS resize Property

What You’ll Learn

The resize property lets users drag to change an element’s size. It is especially common on <textarea> fields and scrollable panels.

Introduction

The resize property in CSS allows you to control if and how an element can be resized by the user.

This property is particularly useful for text areas and other elements where you want to provide users the ability to adjust the size according to their needs.

Definition and Usage

By default, most elements use resize: none. Textareas are a common exception in browser styles, often allowing vertical resizing out of the box.

For custom boxes, pair resize with a non-visible overflow value such as auto so the resize handle appears and scrollbars work when content overflows.

📝 Syntax

The syntax for the resize property is straightforward. It can be applied to any element that supports resizing.

element {
  resize: value;
}

Basic Example

textarea {
  resize: both;
  width: 200px;
  height: 100px;
}

Syntax Rules

• none is the default and disables user resizing.
• both allows horizontal and vertical resizing.
• horizontal and vertical limit the resize axis.
• block and inline are logical-axis keywords.
• Requires overflow other than visible on non-textarea elements.
• Use min-width, max-width, and height limits to constrain growth.

🎯 Default Value

The default value of the resize property is none, meaning the element cannot be resized by the user.

💎 Property Values

When Does resize Matter?

resize is the right tool when users need control over space:

• Comment boxes — Let users expand a textarea while writing longer messages.
• Dashboard panels — Allow vertical growth for widgets with variable content.
• Dev tools UI — Resize console or preview panes horizontally.
• Fixed layouts — Use resize: none when drag handles would break the design.

Always set sensible min-* and max-* sizes so users cannot break the layout.

Examples Gallery

Start with the reference textarea, compare vertical vs none, try horizontal panels, and resize a div with overflow.

<style>
  textarea {
    resize: both;
    width: 200px;
    height: 100px;
  }
</style>

<h1>Resizable Text Area</h1>
<textarea></textarea>

<style>
  textarea {
    resize: vertical;
    width: 100%;
  }
</style>

<style>
  .panel {
    resize: horizontal;
    overflow: auto;
    width: 240px;
    height: 120px;
  }
</style>

<style>
  .box {
    resize: both;
    overflow: auto;
    min-width: 200px;
    min-height: 100px;
  }
</style>

resize and overflow

resize works together with overflow. If overflow is visible, the resize handle will not appear on regular block elements.

Textareas handle overflow internally, which is why resize is so commonly demonstrated on them.

.notes {
  resize: vertical;
  overflow: auto;
  min-height: 120px;
}

💡 Best Practices