CSS resize Property

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

<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

The following table will show you the current browser support for the CSS resize property.

Desktop
Edge Chrome Firefox Opera Safari
791412.13
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
184141137

Last updated by CSSPortal on: 3rd January 2024