CSS Box Resize Generator

Make boxes user-resizable with resize, overflow, and size limits.

Presets:

Free resize
Textarea (vertical)
Sidebar (horizontal)
No resize

Width

320px

Height

160px

min-width (0 = none)

150px

max-width (0 = none)

560px

min-height (0 = none)

80px

max-height (0 = none)

320px

Used in the generated code, e.g. .resizable, textarea

Drag the handle in the bottom-right corner to resize this box. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus. Cras mattis consectetur purus sit amet fermentum.

CSS
.resizable {
  resize: both;
  overflow: auto;
  width: 320px;
  height: 160px;
  min-width: 150px;
  max-width: 560px;
  min-height: 80px;
  max-height: 320px;
}

CSS Box Resize Generator

The CSS resize property adds a drag handle to the bottom-right corner of an element so visitors can make it larger or smaller – the same handle you know from text areas. Choose the direction, set the starting size and optional minimum and maximum limits, then drag the handle in the live preview to try it.

The resize values

  • both – width and height can change.
  • horizontal – only the width changes; great for resizable sidebars and split panes.
  • vertical – only the height changes; the usual choice for comment boxes and code editors.
  • none – removes the handle. Use it on textarea elements when your layout must not change.
  • block / inline – logical directions that follow the writing mode (vertical in English, horizontal in vertical scripts).

Why overflow matters

resize only works when overflow is something other than visible. If you choose visible, the generator automatically writes overflow: auto and tells you why. Use hidden to clip content, scroll to always show scrollbars, or auto to show them only when needed.

Limiting the size

Without limits, users can drag a box far beyond your layout. min-width, max-width, min-height, and max-height keep the box usable:

textarea {
  resize: vertical;
  overflow: auto;
  min-height: 80px;
  max-height: 400px;
}

Leave a limit at 0 to omit it from the CSS.

Browser support

Desktop Chrome, Edge, Firefox, and Safari support resize on any element with non-visible overflow. Mobile browsers usually do not show a handle because there is no precise pointer, so make sure the default size works on its own.

Frequently Asked Questions

resize only applies when overflow is not visible. Set overflow to auto, hidden, or scroll; the generator does this automatically.

Set resize: none on the textarea. Choose the "No resize" preset to get the code.

Yes. min-width, max-width, min-height, and max-height define the limits of the drag handle. Set them with the sliders; 0 means no limit.