CSS resize property
The resize property in CSS controls the ability of an element to be resized by the user. It is particularly useful for elements with overflow content, such as textareas, where you might want to allow users to adjust the size of the element.
Syntax
element {
resize: value;
}
Values
none:- Description: The element cannot be resized by the user.
- Usage: This is the default behavior for most elements, which means they cannot be resized by dragging their edges or corners.
- Example:
resize: none;
both:- Description: The element can be resized both horizontally and vertically.
- Usage: Allows users to resize the element in both dimensions.
- Example:
resize: both;
horizontal:- Description: The element can only be resized horizontally.
- Usage: Allows users to resize the element only along the width.
- Example:
resize: horizontal;
vertical:- Description: The element can only be resized vertically.
- Usage: Allows users to resize the element only along the height.
- Example:
resize: vertical;
Examples
Example 1: Allow Resizing Both Directions
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resize Example</title>
<style>
.resizable-both {
width: 300px;
height: 200px;
resize: both;
overflow: auto;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<textarea class="resizable-both">You can resize me in both directions.</textarea>
</body>
</html>
- This example allows the user to resize the textarea both horizontally and vertically. The
overflow: auto;ensures that content is scrollable if it exceeds the size of the element.
Example 2: Allow Resizing Horizontally Only
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resize Example</title>
<style>
.resizable-horizontal {
width: 300px;
height: 200px;
resize: horizontal;
overflow: auto;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<textarea class="resizable-horizontal">You can resize me horizontally only.</textarea>
</body>
</html>
- This example allows the user to resize the textarea only along the horizontal direction.
Example 3: Prevent Resizing
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resize Example</title>
<style>
.resizable-none {
width: 300px;
height: 200px;
resize: none;
overflow: auto;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<textarea class="resizable-none">You cannot resize me.</textarea>
</body>
</html>
- This example prevents the user from resizing the textarea. The
resize: none;ensures that the element remains at its defined size.
Browser Support
The resize property is supported in modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It is also supported in Internet Explorer 10 and above.
Use Cases
- User-Controlled Resizing: Allow users to adjust the size of elements like textareas to accommodate varying amounts of content.
- Design Flexibility: Provide design flexibility by allowing certain elements to be resized by the user while others remain fixed.
- Content Visibility: Ensure that content within elements is visible and accessible by allowing users to adjust the size as needed.