Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to change the shape of a textarea using JavaScript?

Javascript Web Development Front End Technology

A textarea is an HTML element that provides a multi-line text input field with dynamic width and height. By default, textareas appear as rectangular boxes, but you can change their shape using JavaScript to modify CSS properties.

In this article, we'll explore different methods to transform textarea shapes using JavaScript, including creating parallelograms and ellipses through CSS property manipulation.

Using transform Property for Parallelogram Shape

The transform property with skew() function can transform a rectangular textarea into a parallelogram by skewing it along the X or Y axis.

Syntax

element.style.transform = "skew(angle)";

Example

<html>
<head>
    <style>
        textarea {
            width: 300px;
            height: 100px;
            padding: 10px;
            transition: transform 0.3s ease;
        }
    </style>
</head>
<body>
    <h2>Change Textarea to Parallelogram</h2>
    <p id="status">Click the button to transform the textarea shape.</p>
    <textarea id="myTextarea" placeholder="Enter your text here..."></textarea>
    <br><br>
    <button onclick="makeParallelogram()">Transform to Parallelogram</button>
    <button onclick="resetShape()">Reset Shape</button>
    
    <script>
        function makeParallelogram() {
            var textarea = document.getElementById('myTextarea');
            textarea.style.transform = "skew(20deg)";
            document.getElementById('status').innerHTML = "Textarea transformed to parallelogram using skew(20deg)";
        }
        
        function resetShape() {
            var textarea = document.getElementById('myTextarea');
            textarea.style.transform = "none";
            document.getElementById('status').innerHTML = "Textarea shape reset to default rectangle";
        }
    </script>
</body>
</html>

Using borderRadius Property for Ellipse Shape

The borderRadius property can transform a rectangular textarea into an elliptical shape when set to 50%.

Syntax

element.style.borderRadius = "50%";

Example

<html>
<head>
    <style>
        textarea {
            width: 200px;
            height: 200px;
            padding: 20px;
            text-align: center;
            transition: border-radius 0.5s ease;
            resize: none;
        }
    </style>
</head>
<body>
    <h2>Change Textarea to Ellipse</h2>
    <p id="info">Click the button to create an elliptical textarea.</p>
    <textarea id="ellipseTextarea" placeholder="Type here..."></textarea>
    <br><br>
    <button onclick="makeEllipse()">Make Ellipse</button>
    <button onclick="makeRectangle()">Make Rectangle</button>
    
    <script>
        function makeEllipse() {
            var textarea = document.getElementById('ellipseTextarea');
            textarea.style.borderRadius = "50%";
            document.getElementById('info').innerHTML = "Textarea transformed to ellipse using borderRadius: 50%";
        }
        
        function makeRectangle() {
            var textarea = document.getElementById('ellipseTextarea');
            textarea.style.borderRadius = "0";
            document.getElementById('info').innerHTML = "Textarea restored to rectangular shape";
        }
    </script>
</body>
</html>

Advanced Shape Transformations

You can combine multiple CSS properties for more complex shapes:

<html>
<head>
    <style>
        textarea {
            width: 250px;
            height: 120px;
            padding: 15px;
            transition: all 0.3s ease;
        }
    </style>
</head>
<body>
    <h2>Advanced Textarea Shapes</h2>
    <textarea id="advancedTextarea" placeholder="Advanced shape transformations..."></textarea>
    <br><br>
    <button onclick="makeRounded()">Rounded Corners</button>
    <button onclick="makeRotated()">Rotated</button>
    <button onclick="makeScaled()">Scaled</button>
    <button onclick="resetAdvanced()">Reset</button>
    
    <script>
        function makeRounded() {
            var textarea = document.getElementById('advancedTextarea');
            textarea.style.borderRadius = "25px";
            textarea.style.transform = "none";
        }
        
        function makeRotated() {
            var textarea = document.getElementById('advancedTextarea');
            textarea.style.transform = "rotate(15deg)";
            textarea.style.borderRadius = "0";
        }
        
        function makeScaled() {
            var textarea = document.getElementById('advancedTextarea');
            textarea.style.transform = "scale(1.2)";
            textarea.style.borderRadius = "0";
        }
        
        function resetAdvanced() {
            var textarea = document.getElementById('advancedTextarea');
            textarea.style.borderRadius = "0";
            textarea.style.transform = "none";
        }
    </script>
</body>
</html>

Key Properties for Shape Transformation

Property Effect Example Value
borderRadius Rounds corners, creates circles/ellipses "50%", "15px"
transform: skew() Creates parallelogram shapes "skew(20deg)"
transform: rotate() Rotates the element "rotate(45deg)"
transform: scale() Scales element size "scale(1.5)"

Conclusion

JavaScript provides powerful ways to change textarea shapes by manipulating CSS properties like transform and borderRadius. These techniques can enhance user interface design and create more engaging form elements.

Updated on: 2026-03-15T23:19:00+05:30

485 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements