The CSS3 resize property

One of the lesser-appreciated CSS3 properties, resize does exactly what it says: it allows a user to resize almost any HTML element it is applied to. The property itself is something of a misnomer: it does not make content larger or smaller, and is perhaps more akin to a user-modifiable clip property.

resize can take four values, in addition to inherit:

none	The element cannot be resized. This is the default for the majority of elements in most browser’s UA stylesheets.
horizontal	The element may be resized by the user, but only horizontally.
vertical	The element is restricted to vertical resizing only
both	The element may be resized both horizontally and vertically

resize does not apply to block elements in which overflow has been set to visible, nor is it supported on images.

On a practical level, browsers that currently support resize apply it to textarea form elements by default.While this is a good idea – a user should be able to resize a textarea box to get more room for what they are typing – unrestricted resizing can spoil some page designs. In most cases, it is better to rewrite the CSS rule to restrict resize of the textarea to one direction only:

textarea { resize: vertical; }