CSS - Resize

CSS resize is a property that allows users to adjust the size of an element, either vertically, horizontally, both, or none, based on the specified value.

Resize property adds a handle at the bottom-right corner of an element on a webpage. This handle allows users to click and drag to change the size of an elements, making it larger or smaller according to their preference.

This chapter will cover the use of resize property.

Possible Values

• none − No user-controllable method for resizing an element is possible. This is default value.

none − No user-controllable method for resizing an element is possible. This is default value.

• vertical − User can resize an element in the vertical direction.

vertical − User can resize an element in the vertical direction.

• horizontal − User can resize an element in the horizontal direction.

horizontal − User can resize an element in the horizontal direction.

• both − User can resize an element both horizontally and vertically.

both − User can resize an element both horizontally and vertically.

• block − User can resize an element in the block direction (either horizontally or vertically, depending on the writing-mode and direction value).

block − User can resize an element in the block direction (either horizontally or vertically, depending on the writing-mode and direction value).

• inline − User can resize an element in the inline direction (either horizontally or vertically, depending on the writing-mode and direction value).

inline − User can resize an element in the inline direction (either horizontally or vertically, depending on the writing-mode and direction value).

The properties block and inline are supported only on Firefox and Safari browsers.

Applies to

Elements with overflow other than visible, and optionally replaced elements representing images or videos, and iframes

Syntax

resize: none | vertical | horizontal| both;

CSS resize - none Value

Following example demonstrates use of CSS resize property set to none value. Here we see user is prevented from resizing the element in any direction. The resize: none is a default value.

CSS resize - vertical Value

Following example demonstrates use of CSS resize property set to vertical . Here we see user is allowed to resize the height of the <div> element vertically by dragging the bottom-right corner.

CSS resize - horizontal Value

Following example demonstrates use of CSS resize property set to horizontal . Here we see user is allowed to modify the width of a <div> element horizontally by dragging the bottom-right corner.

CSS resize - both Value

Following example demonstrates use of CSS resize property set to both . Here we see user is allowed to resize the element both horizontally and vertically.

CSS resize - inherit Value

Following example demonstrates use of CSS resize property set to inherit on a child element. Here we see it will have the same resizing behavior as its parent element.

CSS resize - Arbitrary Elements

It is possible to create a resizable <div> container with a resizable p (paragraph) element inside it, where user can click and drag the bottom-right corner to change the size of both the container and the paragraph. Following example demonstartes this behavior.