Understand Before You Build

  • HTML
    • Form
    • HTML pattern Attribute
  • CSS
    • inset
    • scroll-snap-type
    • margin-inline
    • Content-visibility
    • Scroll-Driven Animations
    • Isolation
    • @Container
    • @layer
    • :not()
    • :is()
    • :Where()
    • :has()
    • :target
    • backdrop-filter
    • :root
    • Color-scheme
    • Animations
    • Selectors
    • Object-fit
    • Logical Pseudo-Classes
    • :scope
    • Properties
    • Performance
    • Aspect-ratio
    • State Pseudo-Classes
    • Positioning
    • Resize
    • Structural Pseudo-Classes
    • Responsive Design
    • Units
    • Root & Scope Selectors
    • Scrolling
    • At-Rules
    • Target & URL Selectors
    • Spacing
    • Functions
    • Attribute Selectors
    • Layouts
    • Basic Selectors
    • Filters & Effects
    • Colors & Typography
    • Flexbox
    • Combinator Selectors
    • Grid
    • Form & UI State Selectors
    • AI CSS Generator
  • Sass
    • Variables
    • Nesting
    • Mixins
    • Reusable styles
    • Large project management
  • CSS Frameworks
    • Material UI
    • Bootstrap
    • Tailwind CSS
  • React UI
    • Performance Optimization
    • React.memo
    • useMemo
    • useCallback
    • Lazy Loading
    • Code Splitting
    • Virtual DOM Optimization
    • Preventing Re-renders
    • Props & State
    • Hooks
    • Component-based architecture
    • State-driven UI updates
  • Figma
    • Design systems
    • Tokens
    • Variables
    • Auto layout
    • Component variants
    • Design handoff
    • UI consistency

Resize

CSS Resize

CSS Resize allows users to manually resize an element by dragging its edges or corners.

It is commonly used for:

  • Textareas
  • Panels
  • Resizable layouts
  • Custom editors
  • Dashboard widgets

Basic Syntax

[code theme="dark"] .box{ resize:both; } [/code]

The resize property controls how an element can be resized.


Important Requirement

The resize property works only when:

[code theme="dark"] overflow:auto; [/code]

or

[code theme="dark"] overflow:hidden; [/code]

is applied.


Example

[code theme="dark"] .box{ width:300px; height:200px; padding:20px; border:2px solid #333; overflow:auto; resize:both; } [/code]

HTML

[code theme="dark"]
Resize Me
[/code]

Users can drag the bottom-right corner to resize the element.


[grid] Resizable Panel Resizable Textarea Dashboard Widget Resize Modern UI Resize Interaction [/grid]

resize Property Values

Value Description
none Disables resizing
both Resize horizontally and vertically
horizontal Resize only horizontally
vertical Resize only vertically

resize: both

Allows resizing in both directions.

[code theme="dark"] .box{ resize:both; } [/code]

resize: horizontal

Allows resizing only from left to right.

[code theme="dark"] .box{ resize:horizontal; } [/code]

resize: vertical

Allows resizing only from top to bottom.

[code theme="dark"] .box{ resize:vertical; } [/code]

resize: none

Disables resize functionality.

[code theme="dark"] textarea{ resize:none; } [/code]

Developers often disable textarea resizing for fixed layouts.


[grid] Fixed Textarea Layout Resizable Chat Panel Interactive Dashboard UI Flexible Content Area [/grid]

Common Use Cases

  • Resizable textareas
  • Dashboard panels
  • Code editors
  • Admin layouts
  • Chat application windows

Important Notes

  • Works mainly on block elements
  • Requires overflow property
  • Not all elements support resizing equally
  • Browser appearance may differ slightly

Browser Support

  • Chrome → Supported
  • Edge → Supported
  • Firefox → Supported
  • Safari → Supported

Final Understanding

[code theme="dark"] resize Allow users to manually resize an element [/code]