Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
CSS3 Resize Property
The CSS3 resize property allows users to resize elements by dragging from the bottom-right corner. It provides control over which dimensions can be resized by the user.
Syntax
selector {
resize: value;
}
Possible Values
| Value | Description |
|---|---|
none |
User cannot resize the element (default) |
horizontal |
User can resize horizontally only |
vertical |
User can resize vertically only |
both |
User can resize in both directions |
Example 1: Both Directions
The following example allows users to resize the element in both horizontal and vertical directions −
<!DOCTYPE html>
<html>
<head>
<style>
.resizable-both {
border: 2px solid #333;
padding: 20px;
width: 300px;
height: 150px;
resize: both;
overflow: auto;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="resizable-both">Drag the bottom-right corner to resize me in both directions!</div>
</body>
</html>
A gray box with a resize handle in the bottom-right corner appears. Users can drag to resize both width and height.
Example 2: Horizontal Only
This example restricts resizing to horizontal direction only −
<!DOCTYPE html>
<html>
<head>
<style>
.resizable-horizontal {
border: 2px solid #007bff;
padding: 15px;
width: 250px;
height: 100px;
resize: horizontal;
overflow: auto;
background-color: #e7f3ff;
}
</style>
</head>
<body>
<div class="resizable-horizontal">Resize me horizontally only by dragging the right edge!</div>
</body>
</html>
A light blue box that can only be resized horizontally. The resize handle allows width changes but not height changes.
Example 3: Vertical Only
This example allows resizing in vertical direction only −
<!DOCTYPE html>
<html>
<head>
<style>
.resizable-vertical {
border: 2px solid #28a745;
padding: 15px;
width: 250px;
height: 100px;
resize: vertical;
overflow: auto;
background-color: #d4edda;
}
</style>
</head>
<body>
<div class="resizable-vertical">Resize me vertically only by dragging the bottom edge!</div>
</body>
</html>
A light green box that can only be resized vertically. The resize handle allows height changes but not width changes.
Key Points
- The
overflowproperty must be set to something other thanvisiblefor resize to work - The resize property only works on elements that have
overflowset toauto,scroll, orhidden - Not all elements support the resize property − it primarily works with block elements
Conclusion
The CSS3 resize property enhances user experience by allowing interactive resizing of elements. Remember to set appropriate overflow values for the property to function correctly.
Updated on: 2026-03-15T11:58:23+05:30
120 Views
Advertisements