CSS Almanac

Home » CSS Almanac » Properties » R » resize

resize

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

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~