CSS PROPERTIES
Expand All | Collapse All
CSS AT-RULES
Advertisements

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:

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

The example below shows the resize property in action.

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.

Browsers Icon

Basic Support—

  • Firefox 4+
  • Google Chrome 3+
  • Internet Explorer ×
  • Apple Safari 3+
  • Opera 15+

Further Reading

See tutorial on: CSS Overflow.

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

Advertisements
Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties