CSS resize Property


Example

Here, the user can resize both the height and width of a <div> element:

div {
  resize: both;
  overflow: auto;
}
Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The resize property defines if (and how) an element is resizable by the user.

Note: The resize property does not apply to inline elements or to block elements where overflow="visible". So, make sure that overflow is set to "scroll", "auto", or "hidden".

Default value: none
Inherited: no
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.resize="both" Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -moz- specify the first version that worked with a prefix.

Property
resize 4.0 79.0 5.0
4.0 -moz-
4.0 15.0


CSS Syntax

resize: none|both|horizontal|vertical|initial|inherit;

Property Values

Value Description Demo
none Default value. The user cannot resize the element Play it »
both The user can resize both the height and width of the element Play it »
horizontal The user can resize the width of the element Play it »
vertical The user can resize the height of the element Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

Let the user resize only the height of a <div> element:

div {
  resize: vertical;
  overflow: auto;
}
Try it Yourself »

Example

Let the user resize only the width of a <div> element:

div {
  resize: horizontal;
  overflow: auto;
}
Try it Yourself »

Example

In many browsers, <textarea> is resizable by default. Here, we have used the resize property to disable the resizability:

textarea {
  resize: none;
}
Try it Yourself »

Related Pages

CSS tutorial: CSS User Interface

HTML DOM reference: resize property


Copyright 1999-2023 by Refsnes Data. All Rights Reserved.