CSS resize Property

Posted in CSS Tutorial

Updated on Oct 07, 2024

By Mari Selvan

👁️ 21 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The resize property in CSS allows you to control if and how an element can be resized by the user.

This property is particularly useful for text areas and other elements where you want to provide users the ability to adjust the size according to their needs.

💡 Syntax

The syntax for the resize property is straightforward. It can be applied to any element that supports resizing.

Syntax

Copied

element {
  resize: value;
}

🎛️ Default Value

The default value of the resize property is none, meaning the element cannot be resized by the user.

🏠 Property Values

Value	Description
none	The element is not resizable.
both	The element is resizable both horizontally and vertically.
horizontal	The element is resizable only horizontally.
vertical	The element is resizable only vertically.
block	The element is resizable only vertically. (Equivalent to vertical in modern usage)
inline	The element is resizable only horizontally. (Equivalent to horizontal in modern usage)

📄 Example

In this example, we'll allow a text area to be resized both horizontally and vertically.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS resize Example</title>
  <style>
    textarea {
      resize: both;
      width: 200px;
      height: 100px;
    }
  </style>
</head>
<body>
  <h1>Resizable Text Area</h1>
  <textarea></textarea>
</body>
</html>

🖥️ Browser Compatibility

The resize property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, it is always a good practice to test your website across different browsers to ensure compatibility.

🎉 Conclusion

The resize property is a useful tool for web developers looking to provide a more flexible user experience.

By allowing users to resize elements like text areas, you can enhance the usability of your web applications. Experiment with the different values of this property to see how it can improve the interactivity of your site.