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

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

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

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

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

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;
}

Browser Support

Desktop
X	79	1	4	12.1	3
Tablets / Mobile
37	18	4	14	1	1.0

Last updated by CSSPortal on: 3rd November 2019