CSS: the resize property

Tweet

With the introduction of CSS3, one of the new properties available is resize. With it we are able to make an element resizable vertically, horizontally or both.
We have to take note that the property is available only for Firefox, Chrome and Safari. For those browsers, some elements like the textarea are considered resizable by default (and you may have already noticed that).
Let's see how to use it.

Syntax

The syntax is very simple. The property accepts 4 values:
1) none;
2) both;
3) vertical;
4) horizontal.
When we apply the property to an element, we need to create a rule like:

.ResDiv {
resize: vertical;
}

The property will apply to a div with class="ResDiv":

<div class="ResDiv">This is a vertically resizable div</div>

Want to see it in action? Here you are:

This is a vertically resizable div

Nothing too much complicated.

Control the size

When an element is resizable by the user, we might want to restrict the available sizes. In order to take control of the maximum or minimum element size, we can always use CSS and specifically the following properties:
1) max-width;
2) max-height;
3) min-width;
4) max-height.
Those properties will help us in controlling what the user can do with our resizable element. In the above example I set the max and the min heights.