Treehouse: Grow your CSS skills. Land your dream job.


Last updated on:

resize: none | both | horizontal | vertical | inherit

The resize property is for controlling whether an element is able to be manually resized by the user. The most common example is a <textarea> which is some browsers (Firefox 4+, Chrome 1+, Safari 3+) is able to be resized by default. When resizeable, the textarea has a little UI handle in the lower right. Here it is with and without:

But the resize property isn't limited to textareas, any area can have it. Here's a demo of a paragraph element with resize: both;

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Super important to know: this property does nothing unless the overflow property is something other than visible, which is the default for most elements. So generally to use this, you'll have to set something like overflow: scroll;

Weirdness: Firefox (tested v10) will let you resize an element smaller than it's default. Chrome (tested 17) and Safari (tested 5.1) will not let you resize smaller, only larger (in both dimensions).

More Information

Browser Support

Chrome Safari Firefox Opera IE Android iOS
1+ 3+ 4+ None None None None


  1. Fernando
    Permalink to comment#

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

    Muchas gracias!

  2. harpreet bhatia
    Permalink to comment#

    Does this can also be subjected to onresize event??

  3. 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?


  4. channu yatnur
    Permalink to comment#

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

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";