CSS resize Property

Description

The resize property allows the author to specify whether or not an element is resizable by the user, and if so, along which axis/axes.

Initial value: none
Applies to: elements with 'overflow' other than visible
Inherited: No
Media: Visual
Computed value: Specified value
Animatable: No
CSS Version: CSS3
JavaScript syntax: object.style.resize

Syntax

resize: none | both | horizontal | vertical | inherit

Values

noneThe element offers no user-controllable method for resizing the element.
bothThe element displays a mechanism for allowing the user to resize the element, which may be resized both horizontally and vertically.
horizontalThe element displays a mechanism for allowing the user to resize the element, which may only be resized horizontally.
verticalThe element displays a mechanism for allowing the user to resize the element, which may only be resized vertically.
inherit

Example

HTML

<div class="test">resize: none;</div> 

<div class="test2">resize: both;</div> 

<div class="test3">resize: horizontal;  </div> 

<div class="test4">resize: vertical;</div>

CSS

div {
   width: 250px;
   border: 1px solid blue; 
   background: azure;
   margin: 5px; 
   overflow: auto; 
}
.test {
   resize: none;
}
.test2 {
   resize: both; 
}
.test3 {
   resize: horizontal;
}
.test4 {
   resize: vertical;
}

Result