CSS resize elements

CSS resize A resize property allows users to resize an element (vertically, horizontally, both, or neither) to a specified value.

On a web page, the resize property adds a resize handle to the lower-right corner of an element. Users can click and drag this handle to resize the element, making it larger or smaller as desired.

CSS resize Property

This chapter introduces the use of the CSS resize property, which can take one of the following values:

none – Do not allow users to resize the element via resizable methods. This is the default value.
vertical – Users can resize the element vertically.
horizontal – Users can resize the element horizontally.
both – Users can resize the element both horizontally and vertically.
block – The user can resize the element in a block orientation (horizontally or vertically, depending on the values of writing-mode and direction).
inline – The user can resize the element in an inline orientation (horizontally or vertically, depending on the values of writing-mode and direction).

The block and inline attributes are only supported in Firefox and Safari.

CSS resize – Example

Try selecting different CSS resize property values and resizing the box to see the effect.

Disabling CSS Resizing of a Text Box

The following example demonstrates the use of the CSS resize property set to the none value. The user is prevented from resizing the element in any direction. resize: none is the default value.

<html> 
<head> 
<style> 
textarea { 
resize: none; 
background-color: #e7ef0e; 
overflow: auto; 
height: 100px; 
width: 600px; 
} 
</style> 
</head> 
<body> 
<textarea>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomized words Which doesn't look even slightly believable. If you're going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of the text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</textarea>

</body>

</html>

Vertical Resizing Elements with CSS

The following example demonstrates using the CSS resize property set to vertical. Here, we see that the user can vertically resize the height of the element by dragging the bottom-right corner.

<html> 
<head> 
<style> 
div { 
resize: vertical; 
background-color: #e7ef0e; 
overflow: auto; 
height: 100px; 
width: 600px; 
} 
</style> 
</head> 
<body> 
<h3>Click and drag the bottom-right corner to change the size of an element vertically.</h3> 
<div> 
<h2 style="color: #0f5e02; text-align: center;">Tutorialspoint</h2> 
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomized words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of the text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</p>
</div>

</body>

</html>

Horizontal Resizing of Elements with CSS

The following example demonstrates using the CSS resize property to set the element to horizontal. Here, we can see that the user is allowed to resize horizontally by dragging the bottom right corner.

The width of the element.

<html> 
<head> 
<style> 
div { 
resize: horizontal; 
background-color: #e7ef0e; 
overflow: auto; 
height: 150px; 
width: 550px; 
} 
</style> 
</head> 
<body> 
<h3>Click and drag the bottom-right corner to change the size of an element horizontally.</h3> 
<div> 
<h2 style="color: #0f5e02; text-align: center;">Tutorialspoint</h2> 
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomized words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of the text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</p>
</div>

</body>

</html>

CSS Horizontal and Vertical Resizing of Elements

The following example demonstrates the use of the CSS resize property set to both. In this example, the user can resize the element both horizontally and vertically.

<html> 
<head> 
<style> 
div { 
resize: both; 
background-color: #e7ef0e; 
overflow: auto; 
height: 150px; 
width: 550px; 
} 
</style> 
</head> 
<body> 
<h3>Click and drag the bottom-right corner to change the size of an element vertically and horizontally.</h3> 
<div> 
<h2 style="color: #0f5e02; text-align: center;">Tutorialspoint</h2> 
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomized words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of the text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</p>
</div>
</body>
<html>