Open In App

CSS resize Property

Improve
Improve
Like Article
Like
Save
Share
Report

The resize property in CSS is used to resize the element according to user requirement. It does not apply to inline elements or to block elements where overflow is visible.

Syntax:

resize: none|both|horizontal|vertical|initial;

Property value:

  • none
  • both
  • horizontal
  • vertical
  • initial
    • none: The user is not able to resize the element. It is a default value.

      Example:




      <!DOCTYPE html>
      <html>
          <head>
              <title>resize property</title>
              <style
                  .gfg{
                      border: 2px solid green;
                      padding: 25px; 
                      width: 300px;
                      resize: none;
                      overflow: auto;
                  }
                  h1, h2 {
                      color: green;
                  }
              </style>
          </head>
          <body>
              <center>
                  <h1>GeeksForGeeks</h1>
                  <h2>resize: none;</h2>
                  <div class="gfg">
                      <h2 style="color:red;">Sudo Placement</h2>
                      <h3>Course Overview</h3>
                      <p>
                      Prepare for the Recruitment drive of product 
                      based companies like Microsoft, Amazon, Adobe
                      etc with a free online placement preparation 
                      course.
                      </p>
                      <p
                      The course focuses on various MCQ's & Coding
                      question likely to be asked in the interviews 
                      & make your upcoming placement season efficient
                      and successful.
                      </p>
                  </div>
              </center>
          </body>
      </html>                    

      
      

      Output:

      both: The element should be resized on both sides i.e. height and width.

      Example:




      <!DOCTYPE html>
      <html>
          <head>
              <title>resize property</title>
              <style
                  .gfg{
                      border: 2px solid green;
                      padding: 25px; 
                      width: 300px;
                      resize: both;
                      overflow: auto;
                  }
                  h1, h2 {
                      color: green;
                  }
              </style>
          </head>
          <body>
              <center>
                  <h1>GeeksForGeeks</h1>
                  <h2>resize:both;</h2>
                  <div class="gfg">
                      <h2 style="color:red;">Sudo Placement</h2>
                      <h3>Course Overview</h3>
                       <p>
                      Prepare for the Recruitment drive of product 
                      based companies like Microsoft, Amazon, Adobe
                      etc with a free online placement preparation 
                      course.
                      </p>
                      <p
                      The course focuses on various MCQ's & Coding
                      question likely to be asked in the interviews 
                      & make your upcoming placement season efficient
                      and successful.
                      </p>
                  </div>
              </center>
          </body>
      </html>                    

      
      

      Output:

      horizontal: It is used to resize only the width of the element by the user.

      Example:




      <!DOCTYPE html>
      <html>
          <head>
              <title>tesize property</title>
              <style
                  .gfg{
                      border: 2px solid green;
                      padding: 25px; 
                      width: 300px;
                      resize: horizontal;
                      overflow: auto;
                  }
                  h1, h2 {
                      color: green;
                  }
              </style>
          </head>
          <body>
              <center>
                  <h1>GeeksForGeeks</h1>
                  <h2>resize:horizontal;</h2>
                  <div class="gfg">
                      <h2 style="color:red;">Sudo Placement</h2>
                      <h3>Course Overview</h3>
                       <p>
                      Prepare for the Recruitment drive of product 
                      based companies like Microsoft, Amazon, Adobe
                      etc with a free online placement preparation 
                      course.
                      </p>
                      <p
                      The course focuses on various MCQ's & Coding
                      question likely to be asked in the interviews 
                      & make your upcoming placement season efficient
                      and successful.
                      </p>
                  </div>
              </center>
          </body>
      </html>                    

      
      

      Output:

      vertical: It is only used to resize the height of the element according to the requirement of user.

      Example:




      <!DOCTYPE html>
      <html>
          <head>
              <title>resize property</title>
              <style
                  .gfg{
                      border: 2px solid green;
                      padding: 25px; 
                      width: 300px;
                      resize: vertical;
                      overflow: auto;
                  }
                  h1, h2 {
                      color: green;
                  }
              </style>
          </head>
          <body>
              <center>
                  <h1 style="color:green;">GeeksForGeeks</h1>
                  <h2 style="color:green;">resize:vertical;</h2>
                  <div class="gfg">
                      <h2 style="color:red;">Sudo Placement</h2>
                      <h3>Course Overview</h3>
                       <p>
                      Prepare for the Recruitment drive of product 
                      based companies like Microsoft, Amazon, Adobe
                      etc with a free online placement preparation 
                      course.
                      </p>
                      <p
                      The course focuses on various MCQ's & Coding
                      question likely to be asked in the interviews 
                      & make your upcoming placement season efficient
                      and successful.
                      </p>
                  </div>
              </center>
          </body>
      </html>                    

      
      

      Output:

      initial: It sets the Property to its default value.It is same as none property.

      Example;




      <!DOCTYPE html>
      <html>
          <head>
              <title>resize property</title>
              <style
                  .gfg{
                      border: 2px solid green;
                      padding: 25px; 
                      width: 300px;
                      resize: initial;
                      overflow: auto;
                  }
                  h1, h2 {
                      color:green;
                  }
              </style>
          </head>
          <body>
              <center>
                  <h1>GeeksForGeeks</h1>
                  <h2>resize:initial;</h2>
                  <div class="gfg">
                      <h2 style="color:red;">Sudo Placement</h2>
                      <h3>Course Overview</h3>
                       <p>
                      Prepare for the Recruitment drive of product 
                      based companies like Microsoft, Amazon, Adobe
                      etc with a free online placement preparation 
                      course.
                      </p>
                      <p
                      The course focuses on various MCQ's & Coding
                      question likely to be asked in the interviews 
                      & make your upcoming placement season efficient
                      and successful.
                      </p>
                  </div>
              </center>
          </body>
      </html>                    

      
      

      Output:

      Supported Browsers: the browsers supported by resize Property are listed below:

      • Google Chrome 1
      • Edge 79
      • Firefox 4
      • Opera 12.1
      • Safari 3


    Last Updated : 06 Jun, 2023
    Like Article
    Save Article
    Previous
    Next
    Share your thoughts in the comments
Similar Reads