Skip to content
Related Articles

Related Articles

Improve Article

How to specify a division element should be resizable in CSS ?

  • Last Updated : 14 Apr, 2021

In this article, we will learn how to specify that a division element should be resizable by the user using CSS.

Approach: The resize property is used to define if an element is resizable by the user. It can be specified with three values to denote that an element is resizable, that is, horizontal, vertical, and both. It is set to none by default. We can specify any of these values to make the division resizable as per the requirement. Additionally, the overflow property has to be set to auto so that the resize behaves correctly.

Syntax:

.resizeable {

  /* Enable resize on both 
  horizontal and vertical */
  resize: both;
}

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        body {
            text-align: center;
            font-size: 20px;
        }
  
        .container {
            display: flex;
            height: 500px;
        }
  
        .resize-both,
        .resize-hor,
        .resize-ver {
            border: 5px green double;
            padding: 20px;
            width: 200px;
            height: 200px;
            margin: 16px;
  
            /* Set overflow to auto */
            overflow: auto;
        }
  
        .resize-both {
  
            /* Enable resize on both 
            horizontal and vertical */
            resize: both;
        }
  
        .resize-hor {
  
            /* Enable resize on
            horizontal */
            resize: horizontal;
        }
  
        .resize-ver {
  
            /* Enable resize on
            vertical */
            resize: vertical;
        }
    </style>
</head>
  
<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
  
    <div class="container">
        <div class="resize-both">
            This division can be resized
            in both directions
        </div>
          
        <div class="resize-hor">
            This division can be 
            resized horizontally
        </div>
          
        <div class="resize-ver">
            This division can be 
            resized vertically
        </div>
    </div>
</body>
  
</html>

Output:

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :