CSS resize Property Demo

The resize property controls whether and how an element can be resized by the user. It applies to block-level elements and replaced elements (like <textarea>) whose overflow is not visible. Values include none, both, horizontal, vertical, block, and inline. The resize handle appears at the bottom‑right corner by default in LTR layouts.

According to the CSS specification, the resize property only takes effect when overflow is not visible (the default). This is because resizing changes the element's dimensions, and the browser needs a defined overflow behavior to handle content that may no longer fit. Use overflow: auto, overflow: scroll, or overflow: hidden to enable resizing.

block restricts resizing to the block flow direction, and inline restricts it to the inline direction. These directions depend on the element's writing-mode. With default writing-mode: horizontal-tb, block ≈ vertical and inline ≈ horizontal. With writing-mode: vertical-rl, block becomes horizontal and inline becomes vertical. Try the presets above to see this in action!

Simply apply resize: none to the textarea. This is one of the most common real‑world uses of the resize property — many developers disable textarea resizing to maintain a consistent layout. You can also use resize: vertical to allow height adjustments only, which is useful for comment boxes.

There is limited standardized support. In WebKit‑based browsers (Chrome, Safari, Edge), you can use the ::-webkit-resizer pseudo‑element to style the handle. However, this is non‑standard and not supported in Firefox. For cross‑browser custom resize handles, consider using JavaScript‑based solutions with custom UI elements instead of relying on the native resize property.

The browser respects min-width, max-width, min-height, and max-height constraints during resize operations. The user cannot drag the element beyond these boundaries. This is useful for preventing an element from becoming too small to be usable or too large to fit the layout. Adjust the constraint values in the controls above to test this behavior.

Native resize handles are rendered by the browser and tend to be quite small — often too small for comfortable touch interaction on mobile devices. While the property technically works on mobile, the user experience can be frustrating. For mobile‑first designs, consider providing alternative sizing controls (like buttons or sliders) or using a JavaScript‑based custom resize implementation with larger touch targets.

The block and inline values were introduced later and are supported in Chrome 118+, Firefox 119+, Safari 17+, and Edge 118+ (all released in late 2023). Older browsers will treat them as resize: none (no resizing). For broad compatibility, stick with both, horizontal, vertical, or none. Check caniuse.com for up‑to‑date support data.