CSS resize Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The resize CSS property is used to control whether an element, typically a textarea or an element with a specific size, can be resized by the user. It allows you to specify whether the element can be resized horizontally, vertically, both, or not at all. This property is commonly applied to textareas and other resizable elements on web forms to give users the ability to adjust the size of the input field according to their preferences or the amount of content they want to input. It is a useful feature for improving the user experience and ensuring that input fields can accommodate varying amounts of data.

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

Interactive Demo

resize: both;

resize: horizontal;

resize: vertical;

resize: none;

Resize Property Demo, try resizing this element.

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

Editor