/    /  CSS resize

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:

 

CSS resize

 

 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:

 

CSS resize