The CSS resize property specifies how the element is resizable. It controls over the appearance and function of the resizing mechanism. The resizing mechanism is usually a triangle knob at the bottom right corner of the element.
This property is one of the CSS3 properties.
It has 4 values: “none”, “both”, “horizontal” and “vertical”. There are two other values “block” and “inline” which are experimental technology.
| Initial Value | none |
| Applies to | Elements with overflow other than visible, and optionally replaced elements representing images or videos, and iframes. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | Object.style.resize = “horizontal”; |
Syntax
resize: none | both | horizontal | vertical | block | inline | initial | inherit;Example of the resize property with the “both” value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border: 1px solid #1c87c9;
background-color: #eee;
padding: 10px;
width: 300px;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<h2>Resize property example</h2>
<div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<p>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
</body>
</html>In the given example both the height and the width of the element are resizable.
See another example, where the element is resizable only vertically:
Example of the resize property with the “vertical” value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border: 2px solid #ccc;
background-color: #eee;
padding: 10px;
width: 300px;
resize: vertical;
overflow: auto;
}
</style>
</head>
<body>
<h2>Resize property example</h2>
<div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<p>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
</body>
</html>Another example where the element is resizable only horizontally:
Example of the resize property with the “horizontal” value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border: 1px solid #8ebf42;
background-color: #eee;
padding: 10px;
width: 300px;
height: 200px;
resize: horizontal;
overflow: auto;
}
</style>
</head>
<body>
<h2>Resize property example</h2>
<div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<p>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
</body>
</html>