Resizing Website Elements With CSS Resize Property

You must have noticed some website elements getting resized by dragging their bottom right corner. You can also control how an element gets resized using resize property. This property specifies if an element can be resized by the user. It also specifies the axis of its resizability.

The most common application of this property is to disable or change the resizing behaviour of textarea. This is also used when you have to write a long post in a textarea or a div and don't want it to occupy a large space in your webpage.

CSS

resize: value;

The resize property takes the following values.

Values

none : User cannot resize the element.

horizontal : User can resize the width of the element.

vertical : User can resize the height of the element.

both : User can resize both the width and the height of the element.

initial : Sets the property to its default value.

inherit : The element inherits the resize value of its parent.

These are the values which decide the way elements are resized. Before moving to the examples, have a look at some related points worth noting.

Important Points

• While the default value of the resize property is none for most of the elements, that of textarea is both in most of the browsers.
• The values other than none of the resize property are only effective if the overflow property is set a value other than visible.
• You can control the maximum width and height of an element that can be resized using the max-width and max-height property. Similarly, you can also control the minimum width and height using the min-width and the min-height property.
• You cannot resize a textarea smaller than its original size in Webkit based browsers.

If an element is resizable, then you will see a small draggable handle on its bottom right or bottom left corner, it is bottom right in most of the cases.

See the Pen CSS resize by Aakhya Singh (@aakhya) on CodePen.

The first div has the default resize value none and thus cannot be resized. The second and the third div can be resized by the width and the height respectively. The last one can be resized by both its width and height.

Now go to another example where an element does not have its default value none.

See the Pen non -resizable textarea by Aakhya Singh (@aakhya) on CodePen.

Both the width and the height of textarea are resizable by default. You can remove the dragable handle from its bottom right corner by giving display: none, or can make it resizable by only its width or height by giving it resize: horizontal or resize: vertical.

You can control the extent to which the elements can be resized. This can be done by giving constraints using the min-width and the max-width properties for the width and the min-height and the max-height properties for the height as shown in the following example.

See the Pen constrained margins by Aakhya Singh (@aakhya) on CodePen.

The normal height of the first div is 100px. In Webkit browsers, its width can be expanded upto 200px but cannot be reduced. In Firefox, its width can be expanded till 200px and reduced till 50px. The same is true for the second div.

Browser Support

This property is not supported by IE, Edge, iOS Safari and Opera Mini.