Nearby lessons

14 of 15

CSS: Resize (User Interface)

📌 What is CSS Resize Property?

The resize property in CSS enables or disables the user's ability to resize an element. It's typically used with elements that have overflow set to something other than visible. You can control whether resizing is allowed in the horizontal, vertical, both directions, or not at all.

1️⃣ Horizontal Resize

Allows users to resize the element only horizontally (left-right).
Example02
Code Cell
Loading Editor...
✏️ You can edit this code — click Run to refresh the preview.
Output

2️⃣ Vertical Resize

Allows users to resize the element only vertically (top-bottom).
Example03
Code Cell
Loading Editor...
✏️ You can edit this code — click Run to refresh the preview.
Output

3️⃣ Both (Auto) Resize

Allows resizing in both horizontal and vertical directions.
Example04
Code Cell
Loading Editor...
✏️ You can edit this code — click Run to refresh the preview.
Output

4️⃣ No Resize

Prevents the element from being resized.
Example05
Code Cell
Loading Editor...
✏️ You can edit this code — click Run to refresh the preview.
Output

🧠 Test Your Knowledge

3 Questions
Progress: 0 / 3