Contents
Making CSS resize images and more
By using the CSS resize
property, you can specify whether an element can be resized by the user:
In addition to that, this property allows you to define the directions in which the element can be resized:
Note: you cannot use
resize
on inline elements or block elements that have the overflow property set tovisible
.
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
:

- 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
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable

- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
- Nanodegree programs
- Suitable for enterprises
- Paid Certificates of completion

- A wide range of learning programs
- University-level courses
- Easy to navigate
- Verified certificates
- Free learning track available
- University-level courses
- Suitable for enterprises
- Verified certificates of completion
CSS resize property values
Value | Description |
---|---|
none |
The default value. The user cannot resize the element |
both |
The user can adjust the height and the width of the element |
horizontal |
The user can adjust the width of the element |
vertical |
The user can adjust the height of the element |
Browser support

Chrome

Edge

Firefox

IE

Opera

Safari
Mobile browser support

Chrome

Firefox

Opera
