Home »
CSS
The resize Property in CSS
CSS | resize Property: Here, we are going to learn about the resize property with its syntax, examples in CSS (Cascading Style Sheets).
Submitted by Anjali Singh, on January 10, 2020
CSS | resize Property
Starting note:
We deal with various elements regularly while we are developing a website or a web page and to organize, edit and format those elements is a very crucial task as those elements are the basic building blocks of our website.
So how as we all know there are numerous ways to style the elements of a web page or to change the functionality of those elements? This section is all about discussing one such property known as resize property in CSS.
Definition:
The resize property in CSS is used to resize the size of the element according to the user's need and also in which directions. The resize property can take 4 values.
Syntax:
Element{
Resize : none|both|vertical|horizontal;
}
Let's look at each property...
1) resize : none
none value is applied to the resize property when the user doesn't want to resize the element. It is also the default value.
Syntax:
Element{
resize:none;
}
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid;
padding: 15px;
width: 300px;
resize: none;
}
</style>
</head>
<body>
<h1>The resize Property</h1>
<div>
<p>None value doesn’t allow resizing of this div element.</p>
</div>
</body>
</html>
Output
In the above example, you cannot resize the div element. It is static.
2) resize : both
both value is applied to the resize property when the user wants its element to be resizable on both sides that is width and height.
Syntax:
Element{
resize:both;
}
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid;
padding: 15px;
width: 300px;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<h1>The resize Property</h1>
<div>
<p>click and drag the bottom right corner to resize the height and width of this div element.</p>
</div>
</body>
</html>
Output
In the above example, to resize click and drag the bottom right corner of this div element.
3) resize : vertical
vertical value is applied to the resize property when the user wants to resize the height of the element according to its need.
Syntax:
Element{
resize:vertical;
}
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid;
padding: 15px;
width: 300px;
resize: vertical;
overflow: auto;
}
</style>
</head>
<body>
<h1>The resize Property</h1>
<div>
<p>click and drag the bottom right corner to resize the height of this div element.</p>
</div>
</body>
</html>
Output
In the above example, the user can click and drag the bottom right corner of this div element to resize its height.
4) resize : horizontal
horizontal value is applied to the resize property when the user wants to resize the width of the element according to its need.
Syntax:
Element{
resize:horizontal;
}
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid;
padding: 15px;
width: 300px;
resize: horizontal;
overflow: auto;
}
</style>
</head>
<body>
<h1>The resize Property</h1>
<div>
<p>click and drag the bottom right corner to resize the width of this div element.</p>
</div>
</body>
</html>
Output
In the above example, the user can click and drag the bottom right corner of this div element to resize its width.
CSS Tutorial & Examples »