rounded corner textarea

This is very general questi开发者_如何学Goon.

I want to create a textarea with rounded corner with CSS. Please help me out.

Depending on what browser support you need, you could use CSS3's border-radius property.

textarea {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

Don't just use somebody else's code: understand and write it yourself. Sliding doors is what you're after: http://www.alistapart.com/articles/slidingdoors/

Basically there is no way to do this in CSS2 other than a cheap hack.

You can fudge it by setting the top and bottom borders of the textarea to have the same color as the background. You then make up a top and bottom image with rounded corners.

This is some pretty quick html/css. You will have to tweak it further for different browsers (eg. the way chrome and firefox display textareas is a fair bit different).

<style>
.container {
    width: 400px;
}
textarea {
    border: none;
    border-collapse:collapse;
    border-right: #000 1px solid;
    border-left: #000 1px solid;
    resize: none;
    margin: 0;
    padding: 0;
    width: 400px;
}
</style>


<div class="container">
    <img src="top_cap.jpg" />
    <div><textarea rows="10"></textarea></div>
    <img src="bottom_cap.jpg" />
</div>

update A quick test page for you http://www.killyourstereo.com/temp/textbox.html

You can use Jquery "jquery.com" and plug-in "DD_roundies" to apply rounded corners to dom elements http://dillerdesign.com/experiment/DD_roundies/

Consider using Formwin. Works on many form elements for IE8 and above.

http://www.roundedcornr.com/

or

<div class="loginboxdiv">
  <input class="loginbox" name="username" type="text" />
</div>

CSS-

   .loginboxdiv
{
 margin:0;
 height:21px;
 width:146px;
 background:url(login_bg.gif) no-repeat bottom;
}
.loginbox
{
 background:none;
 border:none;
 width:134px;
 height:15px;
 margin:0;
 padding: 2px 7px 0px 7px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:11px;
}