CSS resize Property

The CSS resize property controls whether — and in which direction — the user can resize an element by dragging it. When resizing is enabled, the browser shows a small drag handle (usually a triangular knob) in the element's bottom-right corner, letting visitors stretch or shrink the box themselves.

This property is one of the CSS3 properties. Its most familiar appearance is on the <textarea> element, which is resizable by default in most browsers. With resize, you can extend the same behavior to other boxes — or switch it off on a <textarea> where free resizing would break your layout.

The four standard values are none, both, horizontal, and vertical. Two additional values, block and inline, resize relative to the writing direction and are still considered experimental.

Info

resize only takes effect when the element can actually clip its own content. It is ignored on inline elements and on any element whose overflow is visible (the default). To make resize work on a generic block such as a <div>, set overflow to auto, scroll, or hidden. A <textarea> works without this because it already establishes its own scroll container.

Initial Value	none
Applies to	Elements with overflow other than visible, and optionally replaced elements representing images or videos, and iframes.
Inherited	No.
Animatable	No.
Version	CSS3
DOM Syntax	Object.style.resize = "horizontal";

Syntax

resize: none | both | horizontal | vertical | block | inline | initial | inherit;

Pair resize with overflow and a sensible starting width/height so the box has a defined size to resize from. You may also want min-width/max-width (or their height counterparts) to keep the box within reasonable bounds.

Example of the resize property with the "both" value

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        border: 1px solid #1c87c9;
        background-color: #eee;
        padding: 10px;
        width: 300px;
        resize: both;
        overflow: auto;
      }
    </style>
  </head>
  <body>
    <h2>Resize property example</h2>
    <div>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </p>
      <p>
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      </p>
    </div>
  </body>
</html>

Try it Yourself »

Here both the height and the width of the <div> are draggable, because resize: both is combined with overflow: auto. Remove the overflow line and the drag handle disappears — that is the most common reason resize "doesn't work".

See another example, where the element is resizable only vertically:

Example of the resize property with the "vertical" value

CSS resize vertically resizable example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        border: 2px solid #ccc;
        background-color: #eee;
        padding: 10px;
        width: 300px;
        resize: vertical;
        overflow: auto;
      }
    </style>
  </head>
  <body>
    <h2>Resize property example</h2>
    <div>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </p>
      <p>
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      </p>
    </div>
  </body>
</html>

Try it Yourself »

Another example where the element is resizable only horizontally:

Example of the resize property with the "horizontal" value

CSS resize horizontally resizable example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        border: 1px solid #8ebf42;
        background-color: #eee;
        padding: 10px;
        width: 300px;
        height: 200px;
        resize: horizontal;
        overflow: auto;
      }
    </style>
  </head>
  <body>
    <h2>Resize property example</h2>
    <div>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </p>
      <p>
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      </p>
    </div>
  </body>
</html>

Try it Yourself »

Turning resizing off on a textarea

A very common real-world use is the opposite of the examples above: disabling the default drag handle on a <textarea> so users cannot break a fixed-width form. Set resize: none (and often resize: vertical if you want to allow height-only growth):

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      textarea {
        width: 300px;
        height: 100px;
        /* allow the box to grow taller, but never wider */
        resize: vertical;
      }
    </style>
  </head>
  <body>
    <h2>Comment</h2>
    <textarea placeholder="Type your message..."></textarea>
  </body>
</html>

When to use it

Textareas: the everyday case. Use resize: vertical to let people lengthen a comment box without distorting the form's width, or resize: none to lock it entirely.
Resizable panels and previews: code editors, image comparisons, and chat windows let users drag a box to a comfortable size.
Avoid on layout-critical boxes: if dragging an element would overlap or push other content unpredictably, leave resize at none.

Because resizing only changes the rendered size in the browser and never the actual content, it has no effect on the document that gets submitted or stored.

Values

Value	Description	Play it
none	The element is not resized. This is the default value of this property.	Play it »
both	The element is resized both vertically and horizontally.	Play it »
horizontal	The element is resized only horizontally.	Play it »
vertical	The element is resized only vertically.	Play it »
block	The element displays a mechanism for allowing the user to resize it in the block direction (either horizontally or vertically depending on the writing-mode and direction value). This value is an experimental technology.
inline	The element displays a mechanism for allowing the user to resize it in the inline direction (either horizontally or vertically depending on the writing-mode and direction value). This value is an experimental technology.
initial	Makes the property use its default value.	Play it »
inherit	Inherits the property from its parents element.

Practice

What CSS property is used to control the resizing behavior of an element?

resizescaletransformchange