↔️ CSS resize — Complete Tutorial

🌐 What Is resize?

The resize property allows users to manually resize elements on the page—typically <textarea>, but also any element with overflow not set to visible. It gives users control over how big or small resizable components become.

>>“Use resize to let users dynamically adjust UI elements like textareas or panels.”

Note

✔ Commonly used on textareas
✔ Requires overflow value other than visible
✔ Resizing behavior depends on browser & platform

📦 Syntax

resize syntax

resize: none | both | horizontal | vertical | block | inline;
ValueDescription
noneUser cannot resize the element.
bothResizable in both horizontal and vertical directions.
horizontalResizable only left–right.
verticalResizable only up–down.
blockResizable in the block direction (depends on writing-mode).
inlineResizable in inline direction (depends on writing-mode).

📌 Important Requirement: overflow

For resizing to work, overflow must NOT be visible.

Required overflow

textarea {
  resize: both;
  overflow: auto; /* Required */
}

Note

If overflow: visible; is set, the resize handle will not appear.

📌 1. Make a Textarea Resizable in Both Directions

Textarea both resize

textarea {
  resize: both;
  overflow: auto;
}

This is the default behavior in many browsers.

📌 2. Disable Resizing Completely

Disable resize

textarea {
  resize: none;
}

Useful when you want strict layout control.

📌 3. Allow Only Vertical Resize

Vertical only

textarea {
  resize: vertical;
  overflow: auto;
}

📌 4. Allow Only Horizontal Resize

Horizontal only

textarea {
  resize: horizontal;
  overflow: auto;
}

📌 5. Resize Block/Inline Direction (Writing Mode Aware)

Writing-mode example

.panel {
  writing-mode: vertical-rl;
  resize: block;   /* resizes top-bottom in this mode */
  overflow: auto;
}

block and inline resizing follow the document’s writing mode.

📌 6. Add a Custom Resizable Panel

Custom resizable panel

.resizable-box {
  width: 200px;
  height: 150px;
  padding: 12px;
  background: #fafafa;
  border: 2px solid #ddd;
  resize: both;
  overflow: auto;
}

You can make any element resizable — not just textareas.

🧪 Real-World Examples

1️⃣ Resizable Chat Input Field

Chat textarea

.chat-input {
  resize: vertical;
  overflow: auto;
}

2️⃣ Code Editor Panel

Editor panel

.editor {
  resize: both;
  overflow: auto;
  min-width: 250px;
  min-height: 150px;
}

3️⃣ Resizable Dashboard Widget

Dashboard widget

.widget {
  resize: both;
  overflow: hidden;
  border: 1px solid #ccc;
  padding: 16px;
}

⚠️ Common Mistakes

  • ❌ Forgetting to set overflow → resize handle won't appear
  • ❌ Expecting resize to work on inline elements (it must be block-level or replaced)
  • ❌ Using resize on form controls with strict layout requirements
  • ❌ Forgetting that browser UI for resizing differs across platforms

Note

Resize improves UX but should be used thoughtfully to avoid breaking layouts.

🔥 Summary

The resize property enables user-controlled resizing of elements. It’s mostly used for textareas, panels, widgets, and editable containers that benefit from flexible size adjustments.

>>“Give users control when they need it—use resize wisely.”

Learn more →MDN Docs 📘