CSS resize Property

❮ Prev Next ❯

The CSS resize property specifies how the element is resizable. It controls over the appearance and function of the resizing mechanism. The resizing mechanism is usually a triangle knob at the bottom right corner of the element.

This property is one of the CSS3 properties.

It has 4 values: "none", "both", "horizontal" and "vertical". There are two other values "block" and "inline" which are experimental technology.

The resize property does not apply to inline elements or to block elements where overflow is set to "visible". It only accepts "auto", "scroll" and "hidden" values of the overflow property.

Initial Value	none
Applies to	Elements with overflow other than visible, and optionally replaced elements representing images or videos, and iframes.
Inherited	No.
Animatable	No.
Version	CSS3
DOM Syntax	Object.style.resize = "horizontal";

Syntax

resize: none | both | horizontal | vertical | block | inline | initial | inherit;

Example of the resize property with the "both" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        border: 1px solid #1c87c9;
        background-color: #eee;
        padding: 10px;
        width: 300px;
        resize: both;
        overflow: auto;
      }
    </style>
  </head>
  <body>
    <h2>Resize property example</h2>
    <div>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </p>
      <p>
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      </p>
    </div>
  </body>
</html>

Try it Yourself »

In the given example both the height and the width of the element are resizable.

See another example, where the element is resizable only vertically:

Example of the resize property with the "vertical" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        border: 2px solid #ccc;
        background-color: #eee;
        padding: 10px;
        width: 300px;
        resize: vertical;
        overflow: auto;
      }
    </style>
  </head>
  <body>
    <h2>Resize property example</h2>
    <div>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </p>
      <p>
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      </p>
    </div>
  </body>
</html>

Try it Yourself »

Another example where the element is resizable only horizontally:

Example of the resize property with the "horizontal" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        border: 1px solid #8ebf42;
        background-color: #eee;
        padding: 10px;
        width: 300px;
        height: 200px;
        resize: horizontal;
        overflow: auto;
      }
    </style>
  </head>
  <body>
    <h2>Resize property example</h2>
    <div>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </p>
      <p>
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      </p>
    </div>
  </body>
</html>

Try it Yourself »

Values

Value	Description	Play it
none	The element is not resized. This is the default value of this property.	Play it »
both	The element is resized both vertically and horizontally.	Play it »
horizontal	The element is resized only horizontally.	Play it »
vertical	The element is resized only vertically.	Play it »
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). This value is an experimental technology.
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). This value is an experimental technology.
initial	Makes the property use its default value.	Play it »
inherit	Inherits the property from its parents element.