<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
div{
width: 150px;
height: 100px;
border: 1px solid #8c8c8c;
overflow: auto;
}
#point{
resize: none;
}
#point1{
resize: both;
}
#point2{
resize: vertical;
}
#point3{
resize: horizontal;
}
</style>
</head>
<body>
<h1>CSS resize property</h1>
<h2>resize: none;</h2>
<div id="point">
You cannot resize this div.
</div>
<h2>resize: both;</h2>
<div id="point1">
You can resize this div in both vertical and horizontal direction.
</div>
<h2>resize: vertical;</h2>
<div id="point2">
You can resize this div in only vertical direction.
</div>
<h2>resize: horizontal;</h2>
<div id="point3">
You can resize this div in only horizontal direction.
</div>
</body>
</html>