CSS resize Property

The resize property defines whether an element can be manually resized by the user and in which directions the resizing can occur.

selector { resize: value; }
none The user cannot resize the element and no resize handle is displayed.
both The user can resize the element both horizontally and vertically.
horizontal The user can resize the element only in the horizontal direction.
vertical The user can resize the element only in the vertical direction.
block The user can resize the element in the block direction according to writing mode.
inline The user can resize the element in the inline direction according to writing mode.

Code Examples

A basic example of a resizable div container that allows the user to stretch the box both horizontally and vertically.

<div style="width: 300px; height: 150px; border: 2px solid #333333; overflow: auto; resize: both;">
  This box is resizable in both directions. Remember that overflow must not be visible for the resize handle to appear.
</div>

An advanced example using the resize property constrained to vertical movement, paired with a JavaScript ResizeObserver to monitor and display the height in real-time.

<div id="editor" style="width: 400px; height: 200px; padding: 10px; border: 1px solid #000000; overflow: hidden; resize: vertical; min-height: 100px; max-height: 500px; background: #f4f4f4;">
  <p>Grab the handle at the bottom right to resize this vertically.</p>
  <p id="stats">Height: 200px</p>
</div>

<script>
const box = document.getElementById("editor");
const stats = document.getElementById("stats");

// Using a ResizeObserver to track manual user changes
const observer = new ResizeObserver(entries => {
  for (let entry of entries) {
    const h = Math.round(entry.contentRect.height);
    stats.innerText = "Height: " + h + "px";
  }
});

observer.observe(box);
</script>

Pro Tip

You can use resize to build a custom code editor or a split-screen layout without writing a single line of JavaScript. By setting resize: horizontal on a sidebar div and giving it a width, you allow the user to drag the divider to their liking. Combine this with modern flexbox or grid layouts, and the rest of your content will automatically shuffle to accommodate the user's manual adjustments.

Deep Dive

Think of the resize property like a handle on a sliding window. By default, most web elements are fixed, but applying resize adds a small UI grabber to the bottom-right corner. For this to work on a standard div, you must set the overflow property to something other than visible, such as auto, hidden, or scroll. Without that overflow setting, the browser refuses to draw the handle because it has no instructions on how to handle the content clipping when the box gets smaller. It is most commonly applied to textarea elements where browsers typically enable it by default, but it can turn any block-level container into a flexible workspace for the user.

Best Practices

Always define min-width, max-width, min-height, and max-height when using resize. This acts as a safety cage, preventing the user from shrinking the element into oblivion or expanding it so far that it breaks your site layout. Just because you give the user control doesn't mean you shouldn't set boundaries. Also, ensure the resize handle doesn't overlap important buttons or text in the corner of your container.

Common Pitfalls

The most frequent mistake is trying to use resize on an element that has overflow: visible. If you don't change the overflow, the resize handle simply will not appear. Additionally, resize does not work on inline elements; you must set the display to block or inline-block for the property to take effect. Another thing to watch for is that different browsers might style the resize handle differently, which can sometimes interfere with your specific aesthetic goals.

Accessibility

Relying solely on a resize handle can be a barrier for users with limited fine motor skills or those using keyboard-only navigation. There is no standard keyboard shortcut to interact with a CSS resize handle. If resizing is a critical part of the user experience, consider providing an alternative method, such as a settings panel or buttons, to adjust the dimensions of the workspace.

Dev Data Table: resize property

default none
animatable no
inherited no
experimental no
year_intro 2004
year_standard 2011
js_syntax_1 element.style.resize = "both";
js_syntax_2 element.setProperty("resize", "both");
js_note The resize property is often used to toggle the manual adjustability of textarea elements or custom containers.
browsers { "Chrome": "1", "Edge": "79", "Firefox": "4", "Safari": "3", "Opera": "12.1", "Chrome Android": "18", "Safari on iOS": "3", "Samsung Internet": "1.0", "Opera Mobile": "12.1" }
results render here...