CSS resize

The resize property in CSS is used to specify whether a user can resize an element or not. This property is commonly used with elements like <textarea> and <iframe> to allow users to resize them as needed. The possible values for the resize property are:

none: The user cannot resize the element.
both: The user can resize the element both vertically and horizontally.
horizontal: The user can only resize the element horizontally.
vertical: The user can only resize the element vertically.

Let's see some examples of how the resize property works:

Result:


    textarea {
      resize: both;
    }

In the example above, we have a <textarea> element that is resizable both vertically and horizontally. This allows the user to adjust the size of the textarea in both directions.

Result:


    iframe {
      resize: vertical;
    }

In this example, we have an <iframe> element that is resizable only vertically. The user can change the height of the iframe but not its width.

Experiment with different values of the resize property to see how it affects the resizing behavior of elements on your web page!