🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

Code has been added to clipboard!

The CSS Resize Property

Reading time 1 min
Published Aug 8, 2017
Updated Sep 27, 2019

Making CSS resize images and more

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

Example
div {
    resize: both;
    overflow: auto;
}

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

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

Example
textarea {
    resize: none;
}

DataCamp
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
Udacity
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
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free 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

Browser image
Chrome
1+
Browser image
Edge
-
Browser image
Firefox
4+
Browser image
IE
-
Browser image
Opera
12.1+
Browser image
Safari
3+

Mobile browser support

Browser image
Chrome
18+
Browser image
Firefox
4+
Browser image
Opera
-
Browser image
Safari
-