← Back to CSS Course | Chapter 5: Layout & Display | Lesson 14 of 14

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:

  1. The resize Property Values
  2. Why overflow Is Required
  3. Textarea Resize Behavior
  4. Building a Custom Resize Handle
  5. Restricting Resize Direction
Syntax
css 
selector {
  resize: none | both | horizontal | vertical;
  overflow: auto;
}

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.
  • Accepted values:
  • none — not resizable (default)
  • both — resize in both directions
  • horizontal — width only
  • vertical — height only
  • block | inline — direction-aware resizing
  • Requires overflow other than visible
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property
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.
  • Accepted values:
  • none — no resizing
  • both — resizable in both directions
  • horizontal — width only
  • vertical — height only
  • block / inline — logical directions
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property
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 
<style>
textarea { width: 240px; height: 80px; border: 2px solid teal; padding: 6px; }
</style>
<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.
  • Accepted values:
  • none — cannot be resized
  • horizontal — width only
  • vertical — height only
  • both — width and height
  • overflow must be other than visible
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property
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>
Live Example
Related Topics

CSS Overscroll Behavior · CSS Calc Deep Dive · CSS Tooltips · CSS Align

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. 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.
  2. 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.
  3. 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

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.