Resize Elements with CSS3

The CSS3-spec is full of wonderful things. Sometimes things that are not so desperately needed as others but anyway… good to have them.

One of these more or less needed properties might be resize. It is part of the CSS3 Basic User Interface Module. What is really useful with resize is the ability to restrict the resizing of textarea for example. But it is possible to resize every element you’d like to as this demo by Simurai shows.

There are four values for resize that are kinda logical:

  • none: no resizing at all
  • horizontal: resizing only horizontal
  • vertical: resizing only… vertical
  • both: yeah, well… pretty obvious, right?!

Robert Nyman created this demo using the resize-property. You should also check out Louis’ article that’s pretty great. And: the MDN docs about resize. You can also read more about this topic at Stackoverflow.