# resize property

The `resize` property prohibits or allows resizing a `textarea` or other elements (does not work with other elements in all browsers).

## Syntax

`selector { resize: both | horizontal | vertical | none; }`

## Values

Value | Description
--- | ---
`both` | You can stretch an element in width and height.
`horizontal` | You can only stretch an element by width.
`vertical` | You can only stretch an element by height.
`none` | You cannot resize an element.

Default value: `none`. For `textarea` in some browsers: `both`. In browsers that do not support `resize`, `textarea` will behave as if it were set to `none`.

## Example . The both value

The element stretches in both directions:

`<textarea></textarea>` `textarea { resize: both; width: 200px; height: 200px; }`

:

## Example . The horizontal value

The element only stretches horizontally:

`<textarea></textarea>` `textarea { resize: horizontal; width: 200px; height: 200px; }`

:

## Example . The vertical value

The element only stretches vertically:

`<textarea></textarea>` `textarea { resize: vertical; width: 200px; height: 200px; }`

:

## Example . The none value

The element does not stretch at all:

`<textarea></textarea>` `textarea { resize: none; width: 200px; height: 200px; }`

:

## Example . Width and height limit

You can limit the minimum and maximum width and height using the `max-width`, `min-width`, `max-height`, `min-height` properties:

`<textarea></textarea>` `textarea { resize: both; min-height: 100px; max-height: 300px; min-width: 100px; max-width: 300px; }`

:

← →
↑
en ru