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 All the Things (Just Like a
The CSS Resize Property
If we look at the definition on MDN, we can see that the resize property supports four main keyword values:
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
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
height. We could also have used
min-heightto achieve the same effect, and of course
max-heightwill limit how big we can make our element.
- You can set resize: none; on a
textareaelement 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.
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!