round corners text area box either in javascript or in css

css, javascript

Solution

A "classic" way to do this, is using a background-image on a div around the textarea and setting border/outline of the textarea to none, like this:

<div style="background-image: url(image/with/rounded/corners.png);">
    <textarea style="border: none; outline: none;">
    </textarea>
</div>

CSS3 supports rounded corners, but that is not well supported, see e.g. http://www.css3.info/preview/rounded-border/

EDIT: The answer was correct at that time, but `border-radius` in IE is only supported from version 9 on.

Problem

Original source