X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

CSS resize Property

The resize CSS property specifies how the element is resizable.

The resize property 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 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

<!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>

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

<!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>

Another example where the element is resizable only horizontally:

Example

<!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>

Values

Value Description
none The element is not resized. This is the default value of this property.
both The element is resized both vertically and horizontally.
horizontal The element is resized only horizontally.
vertical The element is resized only vertically.
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.
inherit Inherits the property from its parents element.

Practice Your Knowledge

The resize property does not apply to inline elements or to block elements where overflow is set to



Do you find this helpful?

Related articles