CSS3

The resize property in CSS3

Always wanted to be able to resize elements in a site? Done dirty hacks for it? CSS3 offers the solution in it’s CSS3 User interface section: the resize property. It allows you to specify if a box is resizable. WebKit implemented it in the latest nightlies. Below is an example box, which is resizable if your browser supports resize:

The code for this is very simple:

div.resize {
	width: 100px;
	height: 100px;
	border: 1px solid;
	resize: both;
	overflow: auto;
}

Now it supports resize: both; like the box above, but also resize: horizontal; and resize: vertical;. Here’s the horizontal one, which has a max-width, so you won’t break the layout completely, and a min-width so you can’t make it to small either:

And the vertical one. with a max-height and a min-height: