Tutorialspoint.dev

CSS | resize Property

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

Syntax:

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

Property:



  • 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:



This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter