resize

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

ChromeOperaFirefoxIEEdgeSafari
4154*NoNo4

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
No37No565752

Comments

  1. User Avatar
    Fernando
    Permalink to comment#

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

    Muchas gracias!

  2. User Avatar
    harpreet bhatia
    Permalink to comment#

    Does this can also be subjected to onresize event??

  3. User Avatar
    Josh Harrington
    Permalink to comment#

    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

  4. User Avatar
    channu yatnur
    Permalink to comment#

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

  5. User Avatar
    Adam Taylor
    Permalink to comment#

    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.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag