CssConceptBeginner · 3 min read

What is resize in CSS: Explanation and Examples

The resize property in CSS allows users to change the size of an element by dragging its corner or edge. It works mainly on elements with overflow other than visible, enabling horizontal, vertical, both, or no resizing.

⚙️

How It Works

The resize property controls whether an element can be resized by the user using the mouse. Imagine a window with a handle at the corner that you can drag to make it bigger or smaller. This property adds that handle to elements like text areas or boxes.

For resize to work, the element must have a set size and its overflow property should not be visible. This is like having a box with a fixed size and scrollbars, so resizing makes sense to adjust the visible area.

You can choose to allow resizing horizontally, vertically, both ways, or disable it completely. This gives control over how users can interact with the element's size.

💻

Example

This example shows a text area that the user can resize both horizontally and vertically.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Resize Example</title>
<style>
  textarea {
    width: 300px;
    height: 150px;
    overflow: auto;
    resize: both;
    padding: 10px;
    font-size: 1rem;
  }
</style>
</head>
<body>
  <textarea placeholder="Try resizing me by dragging the corner"></textarea>
</body>
</html>

Output

A text area box 300px wide and 150px tall with a visible resize handle at the bottom-right corner that the user can drag to change its size horizontally and vertically.

🎯

When to Use

Use resize when you want to give users control over the size of certain elements, like text areas or containers with scrollable content. This is helpful when users might want to see more or less content without changing the whole page layout.

For example, in a comment box or a note-taking app, allowing resizing helps users adjust the space to their preference. It also improves accessibility by letting users customize their view.

However, avoid enabling resizing on elements where it could break the design or cause layout issues, such as complex grids or fixed-size components.

✅

Key Points

The resize property controls if and how an element can be resized by the user.
It works only if the element has a fixed size and overflow is not visible.
Values include none, both, horizontal, and vertical.
Commonly used on <textarea> elements to improve user experience.
Use carefully to avoid breaking page layout or design consistency.

✅

Key Takeaways

The CSS resize property lets users drag to change an element's size.

It requires the element to have a fixed size and non-visible overflow.

You can allow resizing horizontally, vertically, both, or disable it.

Commonly used on text areas to improve usability.

Use resize carefully to maintain good page layout.