The resize property lets a user manually resize an element by dragging a small handle in its corner, most commonly applied to <textarea> elements, which support resizing by default.

Syntax

resize: none | both | horizontal | vertical;

Deep Dive Course

<textarea> elements support user resizing by default in most browsers, since resize's initial value for that specific element is typically both, allowing dragging in either direction, though the resize property itself only has any visible effect on an element whose overflow property is also set to something other than the default visible, like auto or hidden, since resizing relies on the same underlying mechanism as scrollable overflow regions. Setting resize: none on a textarea explicitly disables this default resizing handle, useful when a fixed, non-resizable textarea size is specifically desired for a particular design.

1Understanding Resize

💡

The resize property only has a visible effect on an element whose overflow is also set to something other than the default visible, like auto or hidden — resize alone, without an appropriate overflow value, produces no visible resize handle at all.

editor.html

textarea {
  resize: none;
}

localhost:3000

2Practical Example

Here is a real-world application of Resize showing how it is used in production CSS code.

editor.html

.resizable-box {
  overflow: auto;
  resize: both;
  width: 200px;
  height: 150px;
}

localhost:3000

3Best Practices

Follow these guidelines when working with Resize:

1. Set resize: none on a textarea specifically when a fixed, non-resizable size is genuinely required by the design, rather than leaving the browser's default resizable behavior in place unintentionally

2. Remember resize requires overflow to also be set to something other than visible on that same element, since it shares the same underlying mechanism

3. Consider allowing textareas to remain resizable by default in most cases, since it's a genuinely useful, expected capability for users entering longer amounts of text

⚠️

Tip: The resize property only has a visible effect on an element whose overflow is also set to something other than the default visible, like auto or hidden — resize alone, without an appropriate overflow value, produces no visible resize handle at all.

editor.html

textarea {
  resize: none;
}

localhost:3000

Examples

Example 01Basic Usage

textarea {
  resize: none;
}

Example 02Advanced Example

.resizable-box {
  overflow: auto;
  resize: both;
  width: 200px;
  height: 150px;
}

Best Practices

Set resize: none on a textarea specifically when a fixed, non-resizable size is genuinely required by the design, rather than leaving the browser's default resizable behavior in place unintentionally
Remember resize requires overflow to also be set to something other than visible on that same element, since it shares the same underlying mechanism
Consider allowing textareas to remain resizable by default in most cases, since it's a genuinely useful, expected capability for users entering longer amounts of text

Interview Question

Why does setting resize: both on a plain <div> with the default overflow: visible produce no visible resize handle at all?▼

Hint: Think about what underlying browser mechanism resize actually relies on to implement its drag-to-resize handle, and whether that mechanism is available on an element with the default overflow value.

The resize property's drag-to-resize handle is implemented using the same underlying browser mechanism that manages a scrollable region's boundaries and interactive edges, which fundamentally requires the element to actually be a properly clipped, potentially-scrollable container in the first place, a role specifically established by setting overflow to something other than its default value of visible. An element left at the default overflow: visible has no defined clipped boundary or scrollable region for the browser to attach an interactive resize handle to in any meaningful way, since visible overflow means content is allowed to spill outside the element's box entirely, with no actual contained boundary for a resize handle to meaningfully control the size of. This is exactly why resize is specifically documented as requiring a non-visible overflow value to have any effect at all, and why setting resize: both without also setting an appropriate overflow value, like auto or hidden, silently produces no visible resize handle, since resize's implementation genuinely depends on that other property being properly configured first.

Exercises

MediumPractice using Resize in a real scenario.

View Solution

textarea {
  resize: none;
}

Frequently Asked Questions

Why does setting resize: both on a plain <div> with the default overflow: visible produce no visible resize handle at all?▼

Related Functions

OverflowRefDimensionsCursor