resize - HTML CSS CSS Property

HTML CSS examples for CSS Property:resize

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. resize

Description

The resize CSS property sets whether an element is resizable by the user or not.

The following table summarizes the resize Property.

Item Value
Default value: none
Applies to:Elements with overflow other than visible
Inherited: No
Animatable: No.

Syntax

The syntax of the property is as follows: 


resize:      none | both | horizontal | vertical | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
none user cannot resize the element. This is default value.
both user cam adjust both the height and the width of the element.
horizontal allow the user to adjust only the width of the element.
vertical allow the user to adjust only the height of the element.
initialSets this property to its default value.
inherittake the value of its parent element resize property.

The example below shows the resize property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS resize property</title>
  <style type="text/css">
    textarea {<!--from  w w  w  . ja va 2s  .  c om-->
      resize: none;
    }
    div {
      resize: both;
      overflow: auto;
      width: 300px;
      height: 100px;
      border: 1px solid #000000;
    }
    </style>
 </head>
 <body>
  <h2>Non-resizable textarea</h2>
   <textarea>
   This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. 
   </textarea>
  <h2>Resizable div</h2>
  <div>
   You can resize this div by dragging the bottom right corner.
  </div>
  <p><strong>Note:</strong>The resize property is only supported by the Firefox 4+, Chrome and Safari.</p>
 </body>
</html>

Related Tutorials