resize

Avatar of Sara Cope
Sara Cope on (Updated on )

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

The resize property controls if and how an element can be resized by the user by clicking and dragging the bottom right corner of the element.

.module {
  resize: both;
}

Super important to know: resize does nothing unless the overflow property is set to something other than visible, which is its initial value for most elements.

It’s also worth knowing that Firefox will let you resize an element smaller than its original size. Webkit browsers will not let you resize an element to make it smaller, only larger (in both dimensions).

Values

  • none: the element is not resizeable. This is the initial value for most elements. The textarea element is the most common exception—in many browsers its default resize value is both.
  • both: the user can resize the element’s height and/or width.
  • horizontal: the user can resize the element horizontally (increasing the width).
  • vertical: the user can resize the element vertically (increasing the height).
  • inherit: the element inherits the resize value of its parent.

When an element is resizeable, it has a little UI handle on a lower corner. The handle appears on the right on page elements when the page’s direction is set to ltr (left-to-right), and on the left on rtl (right-to-left) pages.

An element without the handle (front) and with the handle (back)

Demo

The resizeable element in this demo is a paragraph. Click the buttons to try out the different resize values.

See the Pen Resize Demo by CSS-Tricks (@css-tricks) on CodePen.

Related

More Information

Browser Support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeFirefoxIEEdgeSafari
44*No794

Mobile / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari
122123122No