resize

Try it

resize: both; 

resize: horizontal; 

resize: vertical; 

resize: none; 

<section class="default-example" id="default-example"> <div id="example-element">Try resizing this element.</div> </section> 

#example-element { background: linear-gradient(135deg, cyan 0%, cyan 94%, white 95%); border: 3px solid #c5c5c5; overflow: auto; width: 250px; height: 250px; font-weight: bold; color: black; display: flex; align-items: center; justify-content: center; padding: 10px; } 

resize does not apply to the following:

• Inline elements
• Block elements for which the overflow property is set to visible or clip

Syntax

/* Keyword values */ resize: none; resize: both; resize: horizontal; resize: vertical; resize: block; resize: inline; /* Global values */ resize: inherit; resize: initial; resize: revert; resize: revert-layer; resize: unset; 

The resize property is specified as a single keyword value from the list below.

Values

none

The element offers no user-controllable method for resizing it.

both

The element displays a mechanism for allowing the user to resize it, which may be resized both horizontally and vertically.

horizontal

The element displays a mechanism for allowing the user to resize it in the horizontal direction.

vertical

The element displays a mechanism for allowing the user to resize it in the vertical direction.

block

The element displays a mechanism for allowing the user to resize it in the block direction (either horizontally or vertically, depending on the writing-mode and direction value).

inline

The element displays a mechanism for allowing the user to resize it in the inline direction (either horizontally or vertically, depending on the writing-mode and direction value).

Formal definition

Formal syntax

resize = 
 none |
 both |
 horizontal |
 vertical |
 block |
 inline 

Examples

Disabling resizability of text areas

In many browsers, <textarea> elements are resizable by default. You may override this behavior with the resize property.

HTML

<textarea>Type some text here.</textarea> 

CSS

textarea { resize: none; /* Disables resizability */ } 

Result

Using resize with arbitrary elements

You can use the resize property to make any element resizable. In the example below, a resizable <div> contains a resizable paragraph (<p> element).

HTML

<div class="resizable"> <p class="resizable"> This paragraph is resizable in all directions, because the CSS `resize` property is set to `both` on this element. </p> </div> 

CSS

.resizable { resize: both; overflow: scroll; border: 1px solid black; } div { height: 300px; width: 300px; } p { height: 200px; width: 200px; } 

Result

Specifications

Browser compatibility

See also

• <textarea>