CSS3 resize Property
Topic: CSS3 Properties ReferencePrev|Next
Description
The resize CSS property specifies whether an element is resizable by the user or not, if so, along which directions. The following table summarizes the usages context and the version history of this property.
| Default value: | none |
|---|---|
| Applies to: | Elements with overflow other than visible |
| Inherited: | No |
| Animatable: | No. See animatable properties. |
| Version: | New in CSS3 |
Syntax
The syntax of the property is given with:
The example below shows the resize property in action.
Example
Try this code »textarea {
resize: none;
}
div {
resize: both;
overflow: auto;
}Note: The resize property applies to an element who's computed overflow value is something other than visible. If overflow is different in a particular axis (i.e. overflow-x vs. overflow-y), then this property applies to the dimension(s) which do not have the value visible.
Property Values
The following table describes the values of this property.
| Value | Description |
|---|---|
none |
The user cannot resize the element. This is default value. |
both |
The element displays a bidirectional resizing mechanism to allow the user to adjust both the height and the width of the element. |
horizontal |
The element displays a unidirectional horizontal resizing mechanism to allow the user to adjust only the width of the element. |
vertical |
The element displays a unidirectional vertical resizing mechanism to allow the user to adjust only the height of the element. |
initial |
Sets this property to its default value. |
inherit |
If specified, the associated element takes the computed value of its parent element resize property. |
Browser Compatibility
The resize property is supported in all major modern browsers.
 |
Basic Support—
|
Further Reading
See tutorial on: CSS Overflow.
Related properties: overflow, overflow-x, overflow-y
