Resize | CSS-Tricks

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.

noresizer — 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.

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

Chrome	Firefox	IE	Edge	Safari
4	4*	No	79	4

Mobile / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
127	127	127	No

Comments

Fernando

# February 20, 2013

Hey, dude. I’m very grateful for all tricks you’ve shared.

Muchas gracias!

harpreet bhatia

# January 20, 2014

Does this can also be subjected to onresize event??

Mike C

Permalink to comment# August 25, 2017

I know this is a bit late, but window is the only part of the DOM that fires the onresize event

Josh Harrington

# October 1, 2014

Hey Chris,

You’re always my first resource for everything CSS, cheers for all the help over the years!

Just wanted to expand upon your point about the weirdness across Chrome compared with Firefox. I assumed that you’d be able to assign a min-width, a width and a max-width on the resizable element, with the loaded width being taken by the default width. Then the user should be able to change the width between the min and max widths. This seems to be the case in Firefox but not in Chrome.

Any ideas if this is likely to change to implement the Firefox behaviour in Chrome also?

Thanks,
Josh

channu yatnur

# January 29, 2015

Hi,
css resize:both for iframe is not working in IE and firefox but working in chrome very nicely…plz give me suggestions

Adam Taylor

# July 30, 2015

Might be worth adding that max-width and max-height can be used to limit the amount the element can be resized. Stops it being too large and breaking out of its parent for example.

Laurens Maneschijn

# July 19, 2017

Late reply, but perhaps it still helps someone:

I found the webkit restriction on not being able to downsize an element quite frustrating, and found adding :active{ width:0; height: 0; }helps.

Recommended:

add width, height for a sensible starting size.
add min-width, min-height for a sensible min size, so you don’t end up with a 0x0 box that is hard to enlarge again.
add max-width, max-height for a sensible max size, so you don’t end up dragging the corner outside your window.

Notes:

I’m not quite sure how this makes it work.
It seems to be a bit of a hack and probably wise not to rely on it on production websites.
It seems to work on browsers that limit the min size to initial size (WebKit e.g. Chrome).
It has side effects: if you click the element it can shrink to zero size (temporarily).
The above is more apparent on mobile devices and browsers that do not support resize,
and might stay in that state untill clicking or tapping outside the element.
It is probably wise to use mechanisms to limit it to webkit browsers.

Test here: https://jsfiddle.net/ElMoonLite/771Ln5vu/

Complete example:

.resize {
  resize: both;
  overflow: hidden;
/* optional:
  width:  <some sensible starting size>;
  height: <some sensible starting size>;
  min-width:  <some sensible min size>;
  min-height: <some sensible min size>;
  max-width:  <some sensible max size>;
  max-height: <some sensible max size>;
*/
}
.resize:active {
  width: 0;
  height: 0;
}

Liam Mitchell

# October 27, 2017

Could resize allow for specifying a corner or edge for it to be applied on?
As well as styling of the icon/area.

Example: A absolute bottom left area might want to resize from top edge vertically.

Zach Bjornson

# February 15, 2019

Update/correction: Chrome 61+ (no longer a WebKit browser) does allow shrinking. https://bugs.chromium.org/p/chromium/issues/detail?id=94583

Zoink

# June 3, 2020

Is there possible way we could customize that resize in dragging the edges of the element?

Amrit kaur

# September 8, 2021

resize property defined very well!