Home > Tips & Tricks > Resizeable Elements Using the CSS ‘resize: both’ Property

Resizeable Elements Using the CSS ‘resize: both’ Property

Are you tired of fixed-sized elements constraining your designs? Do you want more control over how users interact with resizable elements on your webpage?

Look no further than the ‘resize: both‘ CSS property. In this trick, I will show you how you can use the CSS ‘resize: both’ property to make the resizable elements.

CSS ‘resize: both’ Property

The ‘resize: both‘ property allows you to create resizable elements that users can adjust both horizontally and vertically. It’s a handy tool for enhancing user experience, especially in applications where flexibility and customization are key.

The ‘resize’ property accepts the following values:

  • none: The element cannot be resized. This is the default value.
  • both: Allows resizing in both horizontal and vertical directions.
  • horizontal: Enables horizontal resizing only.
  • vertical: Enables vertical resizing only.
  • initial: Set the default value
  • inherit: Inherit this property from its parent element.

Note: The resize the property does not apply to inline or block elements where overflow=”visible”. Therefore, make sure that the overflow value is set to “scroll“, “auto“, or “hidden“.

Examples of resize: both

Let’s take a look at how to implement a resizeable textarea using the ‘resize: both‘ property:

<textarea class="resizeable-element"></textarea>
.resizeable-element {
  resize: both;
  overflow: auto;
  min-width: 100px; /* Define minimum width */
  min-height: 100px; /* Define minimum height */
  max-width: 500px; /* Define maximum width */
  max-height: 500px; /* Define maximum height */

In the above code, We apply the ‘resize: both‘ property to the element for both sides horizontally and vertically with the class ‘.resizeable-element’. Then add the ‘overflow: auto’ to ensure that scrollbars appear when the content overflows the specified dimensions. The min and max height widths you can adjust accordingly.

So, with the ‘resize: both‘ CSS property, you have the power to create dynamic, resizable elements that adapt to user needs. Whether you’re designing complex web applications or simple websites, mastering this property opens up a world of possibilities for customization and user interaction. Implement it wisely, and watch your designs become more flexible and user-friendly than ever before.

More Tricks


Can I use ‘resize: both’ on any HTML element?

Yes, you can apply the ‘resize: both’ property to most HTML elements such as divs, textareas, and iframes to make them resizable in both horizontal and vertical directions.

How can I make a <div> resizable using CSS?

You can make a <div> resizable by applying the CSS property resize: both; to it. This property allows users to adjust the size of <div> both horizontally and vertically by dragging its edges with the mouse.

Photo of author

About Aman Mehra

Hey there! I'm Aman Mehra, a full-stack developer with over six years of hands-on experience in the industry. I've dedicated myself to mastering the ins and outs of PHP, WordPress, ReactJS, NodeJS, and AWS, so you can trust me to handle your web development needs with expertise and finesse. In 2021, I decided to share my knowledge and insights with the world by starting this blog. It's been an incredible journey so far, and I've had the opportunity to learn and grow alongside my readers. Whether you're a seasoned developer or just dipping your toes into the world of web development, I'm here to provide valuable content and solutions to help you succeed. So, stick around, explore the blog, and feel free to reach out if you have any questions or suggestions. Together, let's navigate the exciting world of web development!

Leave a Comment