Introduction
The CSS resize property is a powerful tool that allows users to interactively resize elements by dragging their corners or edges. While most commonly associated with textarea elements, this property can be applied to any element that has its overflow property set to something other than visible.
Basic Syntax
resize: none | both | horizontal | vertical | block | inline;
Property Values
none
Completely disables the resize functionality. No resize handle will appear.
textarea {
resize: none;
}
both
Allows resizing in both horizontal and vertical directions (default for textareas).
.resizable-box {
resize: both;
overflow: auto;
width: 300px;
height: 200px;
border: 1px solid #ccc;
}
horizontal
Restricts resizing to the horizontal direction only.
.horizontal-resize {
resize: horizontal;
overflow: auto;
width: 300px;
height: 100px;
}
vertical
Restricts resizing to the vertical direction only.
.vertical-resize {
resize: vertical;
overflow: auto;
width: 300px;
height: 100px;
}
block and inline
These newer values allow resizing along the block or inline axis, respectively. They adapt to the writing mode of the document.
.block-resize {
resize: block; /* Vertical in horizontal writing mode */
overflow: auto;
}
.inline-resize {
resize: inline; /* Horizontal in horizontal writing mode */
overflow: auto;
}
Important Requirement: The resize property only works on elements where the overflow property is set to something other than visible. Common values that work include auto, hidden, scroll, or overlay.
Browser Support
Desktop Browser Support
| Browser |
Support |
Version |
| Chrome |
✅ Full Support |
Since version 4 |
| Firefox |
✅ Full Support |
Since version 4 |
| Safari |
✅ Full Support |
Since version 4 |
| Edge |
✅ Full Support |
Since version 79 |
| Internet Explorer |
❌ No Support |
All versions |
Mobile Browser Support
| Platform |
Support |
Notes |
| iOS Safari |
❌ No Support |
Touch interface limitations |
| Chrome Mobile |
✅ Limited Support |
Works but not practical on touch |
| Firefox Mobile |
✅ Limited Support |
Works but not practical on touch |
Mobile Consideration: While some mobile browsers technically support the resize property, the functionality is not practical on touch devices due to the lack of precise cursor control needed for dragging resize handles.
Common Use Cases
1. Removing Default Textarea Resize
Many developers disable the default resize behavior of textareas for consistent form styling:
/* Disable textarea resizing */
textarea {
resize: none;
}
/* Or allow only vertical resizing */
textarea {
resize: vertical;
}
2. Resizable Content Areas
Create user-customizable content areas in dashboards or applications:
.widget {
resize: both;
overflow: auto;
min-width: 200px;
min-height: 150px;
max-width: 600px;
max-height: 400px;
border: 2px solid #ddd;
padding: 1rem;
}
3. Code Editor Panes
Allow developers to adjust the size of code editing areas:
.code-editor {
resize: both;
overflow: auto;
width: 100%;
min-height: 300px;
font-family: monospace;
background: #f8f8f8;
border: 1px solid #ccc;
}
Best Practices
Always Set Size Constraints
Prevent users from breaking your layout by setting reasonable minimum and maximum dimensions:
.resizable-element {
resize: both;
overflow: auto;
/* Set reasonable constraints */
min-width: 150px;
min-height: 100px;
max-width: 800px;
max-height: 600px;
}
Consider the User Experience
Only make elements resizable when it genuinely improves the user experience. Not every element needs to be resizable.
Provide Visual Cues
Make it clear to users which elements can be resized, especially for non-textarea elements:
.resizable-hint {
resize: both;
overflow: auto;
border: 2px dashed #ccc;
position: relative;
}
.resizable-hint::after {
content: "↘ Drag to resize";
position: absolute;
bottom: 5px;
right: 5px;
font-size: 12px;
color: #666;
pointer-events: none;
}
Common Gotchas
Forgetting the Overflow Property
The most common mistake is not setting the overflow property:
/* This won't work */
.broken {
resize: both;
/* overflow is 'visible' by default - resize won't work! */
}
/* This will work */
.working {
resize: both;
overflow: auto; /* Required for resize to function */
}
Not Setting Initial Dimensions
Elements without initial width/height may not display resize handles properly:
.resizable-div {
resize: both;
overflow: auto;
width: 300px; /* Set initial dimensions */
height: 200px;
border: 1px solid #ccc;
}
Accessibility Considerations
- Keyboard Navigation: Resize handles are not accessible via keyboard navigation
- Screen Readers: Screen readers may not announce that elements are resizable
- Motor Impairments: Fine motor control required for dragging may be challenging
- Alternative Methods: Consider providing buttons or other controls for users who cannot use drag gestures
Future Considerations
The CSS resize property continues to evolve. Future specifications may include:
- Better touch device support
- More granular control over resize handles
- Programmatic resize events
- Enhanced accessibility features
Conclusion
The CSS resize property is a valuable tool for creating user-customizable interfaces. With excellent support across modern desktop browsers and straightforward implementation, it’s an effective way to give users control over element sizing. Remember to always set appropriate constraints and consider the user experience when implementing resizable elements.
While mobile support is limited due to touch interface constraints, the property gracefully degrades, ensuring your interfaces remain functional across all devices. Use it thoughtfully in applications where user customization genuinely adds value.
Self Promotion
Since 2011, Codeboxr has been transforming client visions into powerful, user-friendly web experiences. We specialize in building bespoke web applications that drive growth and engagement. Our deep expertise in modern technologies like Laravel and Flutter allows us to create robust, scalable solutions from the ground up. As WordPress veterans, we also excel at crafting high-performance websites and developing advanced custom plugins that extend functionality perfectly to your needs. Let’s build the advanced web solution your business demands.
Visit and learn more about us
