CSS Resize: Browser Support, Values, Limitations

What is CSS resize?

CSS resize is a property defined in the W3C CSS Basic User Interface Module Level 4. It paints a small corner grip on an element so the user can drag it to a new width, height, or both. It accepts the keywords none, both, horizontal, vertical, block, and inline.

Which browsers does CSS resize support?

CSS resize ships in every modern desktop browser and in Chromium-based mobile browsers, but Safari on iOS and Internet Explorer have never added support. Global usage hovers around 82% based on the live caniuse data.

What values does the CSS resize property accept?

CSS resize accepts six keyword values. Each one decides whether the corner grip paints, which axis the user can drag, and whether the value follows the writing-mode of the element.

• none: The default value for most elements. The corner grip does not paint, and the user cannot drag the element to a new size. Use none on a textarea to lock it at the size your stylesheet sets.
• both: The user can drag the element on the horizontal and vertical axes. The corner grip paints on the bottom-right corner in left-to-right writing modes. both is the default user-agent style on the textarea element.
• horizontal: The user can drag only the horizontal axis. Width changes, height stays fixed at the rendered value. Use horizontal on a side panel that should grow wider but keep its full height.
• vertical: The user can drag only the vertical axis. Height changes, width stays fixed. vertical is the most common override on a textarea, since it lets users add lines without breaking the column width.
• block: Resizes along the block axis as defined by the writing-mode and direction. In horizontal-tb writing mode, block matches vertical. In vertical-rl or vertical-lr, block matches horizontal. block is part of CSS Basic User Interface Module Level 4 and ships in current Chrome, Firefox, and Safari.
• inline: Resizes along the inline axis as defined by the writing-mode and direction. inline matches horizontal in horizontal-tb and matches vertical in vertical writing modes. Use inline on internationalized layouts where the axis depends on the language.

How do you disable resize on a textarea?

Browsers ship the textarea element with resize: both as the default user-agent style, so the corner grip paints unless your stylesheet overrides it. Setting resize: none on the textarea selector removes the grip and locks the size.

• Open your stylesheet: Edit the global CSS file or the component-level stylesheet that targets the textarea you want to lock.
• Add a textarea selector: Write a textarea selector or scope it to a specific class such as .comment-box textarea so only the targeted textareas lose the grip.
• Set resize to none: Inside the rule, add resize: none. The user-agent default of resize: both is overridden and the corner grip disappears.
• Switch to vertical for a softer lock: If you only want to stop horizontal drag but keep vertical drag, set resize: vertical instead. This is the common pattern for comment forms where users add lines.
• Reload and verify: Hard-reload the page in Chrome, Firefox, and Safari on macOS to confirm the corner grip is gone. Skip iOS Safari, since the property has no effect there.

A minimal stylesheet rule looks like this:

.comment-box textarea {
    resize: none;
    overflow: auto;
    min-height: 6rem;
}

If the rule does not seem to apply, check that no inline style attribute or higher-specificity selector is setting resize back to both. The user-agent default is the lowest-specificity layer, so any author rule wins as long as the selector matches.

What are the known issues with CSS resize?

CSS resize ships in every modern desktop browser, but the way each engine paints the grip, the elements the property applies to, and the missing iOS Safari support still cause real cross-browser bugs.

• Safari on iOS does not support resize: The CSS resize property has no effect on any iOS Safari version. A textarea or div that depends on the corner grip for sizing on the desktop will not paint a grip on iPhone or iPad. Provide a fallback such as a manual width and height input or rely on auto-grow scripts that adjust the size as the user types.
• resize does nothing without overflow: The spec requires the element to have an overflow value other than visible for resize to take effect. A plain div with resize: both and the default overflow: visible will not paint the grip. Set overflow to scroll, auto, hidden, or clip on the same element to unlock the grip.
• Inline elements ignore resize: The property does not apply to elements with display: inline, so a span or an a tag with resize: both will not paint the grip. Switch the element to display: block, display: inline-block, or a flex or grid item before applying the property.
• Older WebKit clamped at the natural size: Safari before Safari 16 and older Chrome builds would not let the user drag below the rendered content size, even when min-width and min-height were smaller. Modern Chrome, Firefox, and Safari respect the min values and let the element shrink.
• block and inline have lighter support than legacy keywords: The block and inline keywords from CSS Basic User Interface Module Level 4 ship in current Chrome, Firefox, and Safari, but older builds still in the field treat them as none. For broad reach, fall back to horizontal and vertical when writing-mode is left at the default.

In my experience, the failure that bites teams the most is the silent iOS gap, where a comment box that resizes fine on a desktop QA pass turns into a fixed-height field on iPhone, and product complains that users cannot expand the box. The fix is either a JavaScript auto-grow on input or a clear UX signal that mobile users get a fixed size.

Citations

All CSS resize version numbers and platform notes in this guide come from these primary sources:

• W3C CSS Basic User Interface Module Level 4: drafts.csswg.org/css-ui/#resize
• MDN resize CSS property: developer.mozilla.org/en-US/docs/Web/CSS/resize
• MDN overflow CSS property: developer.mozilla.org/en-US/docs/Web/CSS/overflow
• MDN writing-mode CSS property: developer.mozilla.org/en-US/docs/Web/CSS/writing-mode
• MDN browser-compat-data, css.properties.resize: github.com/mdn/browser-compat-data/blob/main/css/properties/resize.json
• WebKit CSS property reference: webkit.org/blog
• Mozilla Firefox 4 release notes: mozilla.org/en-US/firefox/4.0/releasenotes
• Chrome Platform Status, CSS resize block and inline: chromestatus.com/feature/5135278041989120
• CSS-Tricks Almanac, resize: css-tricks.com/almanac/properties/r/resize
• Wikipedia Cascading Style Sheets: en.wikipedia.org/wiki/Cascading_Style_Sheets
• Microsoft Learn, Internet Explorer end of support: learn.microsoft.com/en-us/lifecycle/announcements/internet-explorer-11-end-of-support