CSS resize
The resize CSS property defines whether an element is resizable by the user or not, if so, along with which directions.
It doesn’t apply to the block or inline elements where overflow is set to visible.
Syntax:
resize: none | both | horizontal | vertical | initial | inherit
Property Values:
- none: Does not allow resizing the element.
- horizontal: It resizes the element in a horizontal direction.
- vertical: It resizes the element in a vertical direction.
- both: It resizes the element in both horizontal directions and vertical directions.
- initial: The property to default value.
- inherit: The property from its parent element.
Example: Using horizontal value
<!DOCTYPE html>
<html>
<head>
<style>
h2{
color:pink;
}
div {
border: 2px solid red;
padding: 20px;
font-size: 25px;
width: 300px;
resize: horizontal;
overflow: auto;
background-color: gray;
color: white;
}
</style>
</head>
<body>
<center>
<h2>Resize: horizontal; </h2>
<div>
<p> Hello World. </p>
<p> Enter content here. Enter content here.Enter content here.</p>
</div>
</center>
</body>
</html>
OUTPUT:
Example: Using vertical value
<!DOCTYPE html>
<html>
<head>
<style>
h2{
color:pink;
}
div {
border: 2px solid red;
padding: 20px;
font-size: 25px;
width: 300px;
resize: vertical;
overflow: auto;
background-color: gray;
color: white;
}
</style>
</head>
<body>
<center>
<h2>Resize: vertical; </h2>
<div>
<p> Hello World. </p>
<p> Enter content here. Enter content here.Enter content here.</p>
</div>
</center>
</body>
</html>
OUTPUT:
