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

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 agent presents the 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 to expand the textarea in either direction — horizontally or vertically, or both.

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

When an element is resizable, the can increase its size by cannot make it smaller than it is. However, some browsers such as Firefox will let the 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-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 interface elements that are resizable by default from being resized, especially textareas. Sometimes allowing the 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.

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

textarea#comments {
    resize: none;
}
                

div.resizable {
    resize: vertical;
}