This CSS property allows the user to control the resizing of an element just by clicking or dragging the bottom right corner of the element
This CSS attribute determines the user's ability to resize an element and is not applicable to block or inline elements with overflow set to visible. To manage element resizing, the overflow must be set to a value other than visible, such as overflow: hidden or overflow: scroll.
It is feasible to adjust the dimensions of the elements either horizontally, vertically, or in both directions. Once the resize property is implemented on an element, a small triangular handle appears at the bottom right corner of the element. Users have the ability to drag this handle to expand the textarea either vertically, horizontally, or in both directions.
Occasionally, adjusting the size of an element can lead to unintended changes in the overall layout. Therefore, in certain layout scenarios, it may be more advantageous to prevent the resizing of the element entirely or limit the resizing capability to a single direction.
Syntax
resize: none | horizontal | vertical | both | initial | inherit;
Property values
The values for this CSS property are specified in the following manner:
By default, this property is set to "none," preventing the element from being resized.
horizontal: This setting enables users to adjust the width of the element, expanding or shrinking it along the horizontal axis. It employs a one-way horizontal system to manage the element's width.
vertical: It enables users to adjust the height of an element, resizing it vertically with a one-way control mechanism.
It enables users to adjust the dimensions of an element, allowing resizing in both the width and height directions simultaneously.
initial: It sets the property to default value.
inherit: It acquires the property from its parent element.
Let's understand this CSS by using some examples.
Example: Using horizontal value
This particular value features a one-way resizing capability that permits the user to modify the width of the element.
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid red;
padding: 20px;
font-size: 25px;
width: 300px;
resize: horizontal;
overflow: auto;
background-color: lightgreen;
color: blue;
}
</style>
</head>
<body>
<center>
<h1>Example of the resize: horizontal; </h1>
<div>
<p> This is the div element. </p>
<p> To see the resizing effect, click and drag the bottom right corner of this div element. </p>
</div>
</center>
</body>
</html>
Output
In the preceding result, we observe the adjustment of the div element horizontally. An arrow-shaped handle is visible at the lower right corner of the element. To witness the impact, one must click and drag the handle.
Example: Using vertical value
Similar to the horizontal dimension, this property also supports one-way resizing, while offering the flexibility to modify the height of the element.
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid red;
padding: 20px;
font-size: 25px;
width: 300px;
resize: vertical;
overflow: auto;
background-color: lightgreen;
color: blue;
}
</style>
</head>
<body>
<center>
<h1>Example of the resize: vertical; </h1>
<div>
<p> This is the div element. </p>
<p> To see the resizing effect, click and drag the bottom right corner of this div element. </p>
</div>
</center>
</body>
</html>
Output
In the preceding result, the vertical resizing of the div element is demonstrated. A triangular handle located at the lower right corner of the element enables this action. To observe the impact, users need to click on the handle and drag it accordingly.
Example: Using both value
This particular value features bidirectional resizing functionality, enabling the user to modify both the width and height of the element.
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid red;
padding: 20px;
font-size: 25px;
width: 300px;
resize: both;
overflow: auto;
background-color: lightgreen;
color: blue;
}
</style>
</head>
<body>
<center>
<h1>Example of the resize: both; </h1>
<div>
<p> This is the div element. </p>
<p> To see the resizing effect, click and drag the bottom right corner of this div element. </p>
</div>
</center>
</body>
</html>
Output
Example: Using none value
It does not present any resizing mechanism.
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid red;
padding: 20px;
font-size: 25px;
width: 300px;
resize: none;
overflow: auto;
background-color: lightgreen;
color: blue;
}
</style>
</head>
<body>
<center>
<h1>Example of the resize: none; </h1>
<div>
<p> This is the div element. </p>
<p> There is not any dragging mechanism at the bottom right corner because it is the <b>none</b> value </p>
</div>
</center>
</body>
</html>
Output