Resize

Syntax

Class
Properties
resize
resize: both;
resize-y
resize: horizontal;
resize-x
resize: vertical;
resize-none
resize: none;

Padding is inside the element so to demonstrate it we put it on the container in this example.

<div class="t1 w-320 bg-c-white p-16 shadow-4"> <textarea class="t1 block w-full h-128 b-1-gray resize">Try resizing this textarea</textarea> </div>

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
Do not allow resizing.
t1 resize-none
.t1.resize-none { resize: none; }
Allow horizontal resizing only.
t1 resize-x
.t1.resize-x { resize: horizontal; }
Allow vertical resizing only.
t1 resize-y
.t1.resize-y { resize: vertical; }
Allow both horizontal and vertical resizing.
t1 resize
.t1.resize { resize: both; }