CSS Reference Property

resize

The resize property allows you to specify whether or not an element is resizable by the user, and if so, along which direction.

Currently it is possible to control the appearance of the scrolling mechanism (if any) on an element using the overflow property (e.g. overflow: scroll vs. overflow: hidden etc.). The purpose of the resize property is to also allow control over the appearance and function of the resizing mechanism (e.g. a resize box or widget) on the element.

When an element is resizable, the user agent presents the user with a resizing mechanism, which is usually a small triangular “knob” at the bottom right corner of the element, similar to the one you see on textareas. This knob can be dragged by the user to expand the textarea in either direction — horizontally or vertically, or both.

resize-mechanism
The resizable textarea has a small triangular “knob” at its corner that indicates that it is resizable. This knob can be dragged by the user to expand the textarea in two directions — vertically and horizontally.

You can make an element resizable in both directions or either horizontally or vertically.

When an element is resizable, the user can increase its size by cannot make it smaller than it is. However, some browsers such as Firefox will let the user resize an element to a size that’s smaller than its default size.

You can make any block-level and replaced element, table cell, and inline block element resizable using resize. However, resize will have no effect on the element unless the value of the overflow property is set to something other than visible. If overflow is different in a particular axis (i.e. overflow-x vs. overflow-y), then this property applies to the dimension(s) which do not have the value visible.

The resize property is also used to prevent certain user interface elements that are resizable by default from being resized, especially textareas. Sometimes allowing the user to resize an element may affect the entire layout around that element in an undesirable way, so it is sometimes preferable to either prevent the element from being resized, or restrict its resizability to one direction only, depending on the layout.

Trivia & Notes

The resizing mechanism is NOT the same as the scrolling mechanism. The scrolling mechanism allows the user to determine which portion of the contents of an element is shown. The resizing mechanism allows the user to determine the size of the element.

Official Syntax

  • Syntax:

    resize: none | both | horizontal | vertical | inherit 
  • Initial: none
  • Applies To: elements with overflow other than visible
  • Animatable: no

Values

none
The element is not resizable. The user agent does not present a resizing mechanism on the element, and the user is given no direct manipulation mechanism to resize the element.
both
The element is resizable in both directions (horizontal and vertical). The user agent presents a bidirectional resizing mechanism to allow the user to adjust both the height and the width of the element.
horizontal
The element can be resized horizontally. The user agent presents a unidirectional horizontal resizing mechanism to allow the user to adjust only the width of the element.
vertical
The element can be resized vertically. The user agent presents a unidirectional vertical resizing mechanism to allow the user to adjust only the height of the element.
inherit
The element inherits its resize value from its parent.

Examples

The following disables the resizability of a textarea:

textarea#comments {
    resize: none;
}
                

The following example makes a div resizable only vertically. That is, the user can increase its height (or decrease it in Firefox):

div.resizable {
    resize: vertical;
}
                

Browser Support

CSS resize property

Method of allowing an element to be resized by the user, with options to limit to a given direction.

W3C Candidate Recommendation

Supported from the following versions:

Desktop

  • 4
  • 5
  • No
  • 15
  • 4

Mobile / Tablet

  • No
  • 56
  • No
  • 59
  • 55

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Written by

Last updated December 11, 2016 at 10:45 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.