CSS | resize Property - GeeksforGeeks

09 Aug, 2019
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
initialnone: 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 ChromeInternet ExplorerFirefoxOperaSafariAttention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.My Personal Notes
arrow_drop_upSave
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
Internet Explorer
Firefox
Opera
Safari
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Properties
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
How to apply style to parent if it has child with CSS?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property