The resize property is actually a really cool, very underrated CSS property that you can use to allow the user to resize any HTML element.
You might already know that by default, textarea boxes are resizable by the user. The three little lines in the bottom right corner of a textarea element can be resized if you just drag that bottom left corner out or in, making the box either bigger or smaller. It’s a pretty neat trick. But what’s even neater is that the resizing effect can be applied to virtually any HTML element easily with only two lines of CSS. To see how it works, let’s apply it to a div element.
Let’s start off with a regular div. For that, our HTML should look like this:
<div>A boring old element that you can't resize</div>
The div in question should look like this, depending on how you style it. For this particular tutorial, it’s a good idea to give your div a border, or at the very least a color that contrasts with the page background, so that when we add the resize functionality the user will be able to see their size changes more clearly.
Now all it takes for us to make the element resizable is two little lines of css. Check it out below:
div{
resize: both;
overflow: auto;
}
Now our div should look like this:
As you can see, it has the telltale three lines that indicate that resizing is available. You might have noticed in the code snippet above that we used the overflow: auto property and value with the resize property — the property won’t work without it.
We gave the property the value of both so that the div could be resized both vertically and horizontally, but it also takes the values horizontal and vertical, in case you only want your users to be able to resize it in one direction.
Lastly, don’t forget that this property isn’t supported on Internet Explorer, so be sure to plan your uses of it accordingly!