The CSS Resize Property

Making CSS resize images and more

By using the CSS resize property, you can specify whether an element can be resized by the user:

div {
    resize: both;
    overflow: auto;
}

In addition to that, this property allows you to define the directions in which the element can be resized:

div {
    resize: vertical;
    overflow: hidden;  
}

Note: you cannot use resize on inline elements or block elements that have the overflow property set to visible.

Syntax requirements for CSS resize

The syntax for the resize CSS property requires you to choose and define one out of four available values:

resize: value;

In the example below, you can see how to make textarea not resizable by using the default value of CSS resize:

textarea {
    resize: none;
}

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

CSS resize property values

Browser support

Chrome

1+

Edge

-

Firefox

4+

IE

-

Opera

12.1+

Safari

3+

Mobile browser support

Chrome

18+

Firefox

4+

Opera

-

Safari

-