How to create a custom shaped textarea with css-shapes

How to create a custom shaped textarea with css-shapes

Recently I came across the question How to create a custom shaped textarea on Stack Overflow. At first this question looked quite weird to me, but I remembered an article describing custom text wrapping in CSS3 using css-shapes. This combined with an editable div could create indeed a custom shaped textarea.


Css-shapes are very experimental and currently only supported in Chrome Canary.

To enable css-shapes in Chrome Canary:

  1. Copy and paste chrome://flags/#enable-experimental-web-platform-features into the address bar, then press enter.
  2. Click the ‘Enable’ link within that section.
  3. Click the ‘Relaunch Now’ button at the bottom of the browser window.



The HTML is just a div with the content-editable attribute set to true.

<div class="container" contenteditable="true">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.


The CSS is very basic, it contains a polygon which defines how the text should flow in the div.

  shape-inside: polygon(200.67px 198.00px,35.33px 198.47px,34.67px 362.47px,537.00px 362.74px,535.67px 196.87px,388.33px 197.00px,386.67px 53.53px,201.33px 53.53px);
  font-size: 0.8em;

The polygon has been created with an online polygon creation tool. When using this tool make sure you enable “px” units.

The result is a custom shaped editable div, which could be used as a textarea.

Live example

Screenshot for non-supporting browsers

Leave a Reply

Your email address will not be published. Required fields are marked *