CSS Resize

Imagine a whiteboard bolted to the wall at a fixed size, if you need more space to write, you are simply out of luck. Now imagine that same whiteboard on wheels with an expandable frame, you can grab the corner and stretch it larger whenever you need more room, then shrink it back down later. The resize property adds that expandable frame to boxes on a web page, most commonly textareas, letting visitors drag a small handle in the corner to make an element bigger or smaller to fit their own needs.

In this page:

The resize Property Values
Why overflow Is Required
Textarea Resize Behavior
Building a Custom Resize Handle
Restricting Resize Direction

The resize Property Values

resize accepts none, both, horizontal, and vertical, controlling which directions a user-visible drag handle allows an element to grow or shrink.

Note: Use resize: vertical on comment boxes so users can make more room to write without accidentally widening the layout.

Warning: resize: both can let a box grow wide enough to break a fixed-width layout unless you also apply a max-width constraint.

Example: The resize Property Values

css

<style>
.box {
  resize: both;
  overflow: auto;
  width: 150px;
  height: 100px;
  background: lightblue;
  border: 1px solid #666;
}
</style>
<div class="box">Drag the corner to resize</div>

Why overflow Is Required

The resize property only becomes active when overflow is set to hidden, scroll, or auto, because the browser needs to know how to manage content once the box's size no longer matches its default, the default overflow: visible provides no mechanism for that.

Note: overflow: auto is usually the best choice with resize, it only shows scrollbars when content actually exceeds the resized box.

Warning: Setting resize: both without changing overflow from its default visible value silently does nothing, this is one of the most common resize mistakes.

Example: Why overflow Is Required

css

<style>
.box {
  resize: both;
  overflow: auto;
  width: 150px;
  height: 80px;
  background: lightgreen;
  border: 1px solid #666;
}
.broken {
  resize: both;
  width: 150px;
  height: 80px;
  background: lightpink;
  border: 1px solid #666;
  margin-top: 10px;
}
</style>
<div class="box">Works: overflow is set</div>
<div class="broken">Does nothing: overflow is still visible</div>

Textarea Resize Behavior

Browsers apply resize: both to textarea elements automatically because they already have overflow: auto by default, making textareas the one element where resize works out of the box without extra CSS.

Note: Set a sensible min-height on a resizable textarea so users cannot accidentally shrink it down to an unusable sliver.

Warning: Restricting a textarea's resize entirely with resize: none can frustrate users who need more room to type longer messages.

Example: Textarea Resize Behavior

css

<textarea>Resizable by default, no extra CSS needed</textarea>

Building a Custom Resize Handle

Because native resize handles cannot be restyled, some designs use resize: none combined with a custom-styled corner element and JavaScript for full control over the visual appearance of resizing.

Note: Use cursor: nwse-resize on your custom handle element so the mouse pointer still communicates the resize direction correctly.

Warning: A purely CSS custom handle is decorative only, actual resizing behavior for a custom handle still requires JavaScript to track drag movement.

Example: Building a Custom Resize Handle

css

<style>
.box {
  resize: none;
  position: relative;
  width: 150px;
  height: 100px;
  background: lightblue;
  border: 1px solid #666;
}
.handle {
  cursor: nwse-resize;
  position: absolute;
  bottom: 0;
  right: 0;
}
</style>
<div class="box">
  <span class="handle">◢</span>
</div>

Restricting Resize Direction

Beyond both and none, horizontal and vertical restrict dragging to a single axis, which is useful when only one dimension of a layout can safely flex without breaking surrounding content.

Note: Use resize: horizontal for resizable sidebar panels so users can widen or narrow them without affecting the page's vertical flow.

Warning: resize: horizontal and resize: vertical are not supported identically everywhere for non-textarea elements, always test the target browsers if precise control matters.

Example: Restricting Resize Direction

css

<style>
.sidebar {
  resize: horizontal;
  overflow: auto;
  width: 150px;
  height: 80px;
  background: lightyellow;
  border: 1px solid #666;
}
</style>
<div class="sidebar">Only widens or narrows, not taller</div>

Common Mistakes

Setting resize on an element without also setting overflow to a value other than visible, resize has no effect unless overflow is hidden, scroll, or auto.
Expecting resize to work on inline elements, resize only applies to elements that are block-level or have a defined display like block or inline-block.
Assuming resize is supported on all form elements by default, only textarea has resize enabled by browsers out of the box.

Chapter Summary

resize lets users drag a handle to manually change an element's dimensions, with values both, horizontal, vertical, and none.
resize requires overflow to be set to something other than visible to take effect.
textarea elements have resize: both applied by browsers by default, which you can override or restrict as needed.

Browser Support

resize is supported in all modern browsers except it has no effect on Safari for elements other than textarea in some older versions; the both, horizontal, and vertical values work broadly across Chrome, Firefox, and Edge.

🔒

Chapter Quiz — Complete all 14 topics to unlock

0/14 topics done

Complete these topics first:

← Previous Lesson CSS Overscroll Behavior Next Lesson → CSS Combinators