resize

Allows the user to resize an element. Note that most browsers do not allow the element to be resized to a smaller size than the original.

Note that the element to be resized must have an overflow other than visible.

Test

Try to resize the test <p> in both dimensions.

Try to resize the test <p> horizontally.

Try to resize the test <p> vertically.

p.test {
	border: 1px solid #000000;
	overflow: auto;
}

p#both {
	resize: both;
}

p#hor {
	resize: horizontal;
}

p#ver {
	resize: vertical;
}

With explicit widths and heights

The example above used paragraphs with implicit width: 100% and height: auto. Here are a few test cases with explicit widths, min-widths, and max-widths.

This paragraph has width: 300px

This paragraph has max-width: 1000px

This paragraph has min-width: 1000px

This paragraph has height: 100px

This paragraph has max-height: 100px

This paragraph has min-height: 100px