resize property CSS Reference

---

Definition and Usage

The resize CSS property lets you control the resizability of an element.

• Initial none
• Applies to elements with overflow other than visible
• Inherited no
• Media visual
• Computed Value as specified
• Animatable no
• Canonical order the unique non-ambiguous order defined by the formal grammar

---

Syntax

Formal syntax: none | both | horizontal | vertical

resize: none
resize: both
resize: horizontal
resize: vertical
resize: inherit

---

Values

none

The element offers no user-controllable method for resizing the element.

both

The element displays a mechanism for allowing the user to resize the element, which may be resized both horizontally and vertically.

horizontal

The element displays a mechanism for allowing the user to resize the element, which may only be resized horizontally.

vertical

The element displays a mechanism for allowing the user to resize the element, which may only be resized vertically.

Note: resize does not apply to blocks for which the overflow property is set to visible.

---

Examples

Disabling resizability of textareas

By default, <textarea> elements are resizable in Gecko 2.0 (Firefox 4). You may override this behavior with the CSS shown below:

textarea.example {
  resize: none; /* disables resizability */
}

Using resize with arbitrary elements

You can use the resize property to make any element resizable. In the example below, a resizable <div> box contains a resizable paragraph (<p> element):

<div style="resize:both; overflow:scroll; width:300px; height:300px; border:1px solid black">
  <p style="resize:both; overflow:scroll; width:200px; height:200px; border:1px solid black">
    This paragraph is resizable, because the CSS resize property is set to 'both' on this
    element.
  </p>
</div>

---

Compatibility

Desktop browsers

Mobile browsers