CSS

🎯 CSS resize Property

The resize CSS property allows users to manually resize an HTML element using the mouse. It is commonly applied to elements like textarea or resizable containers.

To make resize work properly, the element usually needs an overflow value such as auto, scroll, or hidden.

🔹 Why Use resize?

Key Benefits
Allows user-controlled element sizing.
Improves usability for text areas.
Useful for flexible UI components.
Helps create adjustable layout areas.

🧩 resize Values

1️⃣ none

Disables resizing completely. The user cannot change the element size.

CSS


textarea {
    resize: none;
}

2️⃣ both

Allows resizing both horizontally and vertically.

CSS


div {
    resize: both;
    overflow: auto;
}

3️⃣ horizontal

Allows resizing only in the horizontal direction (left and right).

CSS


textarea {
    resize: horizontal;
    overflow: auto;
}

4️⃣ vertical

Allows resizing only in the vertical direction (up and down).

CSS


textarea {
    resize: vertical;
    overflow: auto;
}

5️⃣ initial

Resets the property to its default browser value.

CSS


div {
    resize: initial;
}

6️⃣ inherit

Inherits the resize value from the parent element.

CSS


div {
    resize: inherit;
}

🧠 Summary
resize controls whether an element can be resized by the user.
mostly used on textarea elements.
both, horizontal, and vertical define resize direction.
overflow must be set for resize to work properly.

CSS box-shadow

CSS filter

CSS

CSS