It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

The CSS Resize Property

Reading time 1 min
Published Aug 8, 2017
Updated Sep 27, 2019

Making CSS resize images and more

By using the CSS resize property, you can specify whether an element can be resized by the user:

Example
div {
    resize: both;
    overflow: auto;
}

In addition to that, this property allows you to define the directions in which the element can be resized:

Example
div {
    resize: vertical;
    overflow: hidden;  
}

Note: you cannot use resize on inline elements or block elements that have the overflow property set to visible.

Syntax requirements for CSS resize

The syntax for the resize CSS property requires you to choose and define one out of four available values:

resize: value;

In the example below, you can see how to make textarea not resizable by using the default value of CSS resize:

Example
textarea {
    resize: none;
}

CSS resize property values

Value Description
none The default value. The user cannot resize the element
both The user can adjust the height and the width of the element
horizontal The user can adjust the width of the element
vertical The user can adjust the height of the element

Browser support

Browser image
Chrome
1+
Browser image
Edge
-
Browser image
Firefox
4+
Browser image
IE
-
Browser image
Opera
12.1+
Browser image
Safari
3+

Mobile browser support

Browser image
Chrome
18+
Browser image
Firefox
4+
Browser image
Opera
-
Browser image
Safari
-