English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

CSS reference manual

CSS @rules

Complete list of CSS attributes

CSS3 resize attribute usage and examples

The resize CSS attribute specifies whether an element can be resized by the user (if possible) and in which direction it can be resized.

The following table provides usage instructions and version history of this attribute, as well as the usage syntax of this attribute in JavaScript scripts.

Default value:none
Applies to:VisibleOverflowelements
Inheritance:None
Animatable:No.Please see Animation properties.
Version: CSS3new feature
JavaScript syntax:object.style.resize="both"

resize usage syntax

The syntax of this attribute is as follows:

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

The following examples demonstrate how to use the resize attribute.

  textarea {
   resize: none;
  }
  div {
   resize: both;
   overflow: auto;
  }
Test and see‹/›

Note: The resize attribute is applied to an element, the computedoverflowThe value is visible. If overflow is on a specific axis (i.e.overflow-xvs. overflow-y)is different, then this attribute applies to dimensions that do not have a value visible.

Attribute value

The following table describes the values of this attribute.

ValueDescription
noneThe user cannot adjust the size of the element. This is the default value.
bothThe element displays a bidirectional resizing mechanism to allow the user to adjust both the height and width of the element.
horizontalThe element displays a unidirectional horizontal resizing mechanism to allow the user to adjust the width of the element only.
verticalThe element displays a unidirectional vertical resizing mechanism to allow the user to adjust the height of the element only.
initialSet this attribute to its default value.
inheritIf specified, the associated elements will adopt the attribute value of the parent element's resize.

Browser compatibility

The compatibility of the resize attribute of the browser, the numbers in the table below indicate the minimum version number of the browser that supports this attribute; all mainstream browsers support this attribute.

  • Firefox 4+

  • Google Chrome3+

  • Internet Explorer ×

  • Apple Safari 3+

  • Opera 15+

Further reading

Please refer to the following tutorials:CSS Overflow.

Related properties:overflow,overflow-x,overflow-y