Quick tip: How to Make Elements Resizable with CSS Resize

In today’s quick tip video you’ll learn how to make elements resizable with CSS.

Up until recently I didn’t realise it was possible; I thought only textareas could have that resizing handle in the corner. As it turns out, you can have this little handle on pretty much any block level element you want, just by using a property called (drumroll please) CSS resize.

Resize All the Things (Just Like a textarea)

The CSS Resize Property

If we look at the definition on MDN, we can see that the resize property supports four main keyword values:

• resize: both;
• resize: horizontal;
• resize: vertical;
• resize: none;

These values dictate whether the element in question can be resized along the horizontal axis, the vertical axis, both, or (by default) none at all.

This property can only be set to block level elements (not inline elements), and can’t be applied to elements whose overflow property is set to visible.

Here’s a demo to show you (don’t forget, you’ll need to change the overflow property to something other than visible otherwise you’ll see no change):

CSS Resize: Things to Note

• You’ll notice that the resizing stops at a certain minimum size; that’s because we set a width and height. We could also have used min-width and min-height to achieve the same effect, and of course max-width and max-height will limit how big we can make our element.
• You can set resize: none; on a textarea element and it will no longer be resizable.
• You can have resizable elements within resizable elements.
• CSS Resize is supported in all modern browsers; you should feel comfortable using it right away.

Conclusion

CSS Resize can potentially be a useful property to play around with. As mentioned, browser support is solid, so you can use it straight away. Please let us know what you use it for, because it’s quite an unusual one!

Resources:

• CSS resize property on MDN
• Browser support