Resizable web contents -css How To

for example make <textarea> elements resizable

CSS3 resize Property

Example

Specify that a <div> element should be resizable by the user:

div {
    resize: both;
    overflow: auto;
}

More "Try it Yourself" examples below.

---

Definition and Usage

The resize property specifies whether or not an element is resizable by the user.
Note: The resize property applies to elements whose computed overflow value is something other than "visible".

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

---

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	Not supported	5.0 4.0 -moz-	4.0	15.0

---

CSS Syntax

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

Property Values

Value	Description	Play it
none	Default value. The user cannot resize the element

both	The user can adjust both the height and the width of the element
horizontal	The user can adjust the width of the element
vertical	The user can adjust the height of the element
initial	Sets this property to its default value. Read about initial

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;
}

Example

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

div {
    resize: horizontal;
    overflow: auto;}

Example

By default, <textarea> elements are resizable. Use the resize property to prevent textareas to be resized (disable the "grabber" in the textarea):

textarea {
    resize: none;}

---