rounded corner textarea

Question

This is very general question.

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

I think You should read this question. http://stackoverflow.com/questions/7089/what-is-the-best-way-to-create-rounded-corners-using-css — Michas, Jun 30 '10 at 08:10

score 43 · Answer 1 · answered Jun 29 '10 at 22:29

43

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;
}

answered Jun 29 '10 at 22:29

okalex

788
5
12

11

+1 to Alex....clean solution. Be aware that it doesn't work in IE though..... Then again, IE users don't deserve cool stuff like rounded corners – bpeterson76 Jun 29 '10 at 22:51
Yeah, it won't work in existing versions of IE, but it will work in the soon-to-be-released IE9. – okalex Jun 29 '10 at 22:54
4

Make sure you define a border first. – Brad Johansen Jun 29 '10 at 23:05
Not an idea solution just yet. IE6-8 still have an almost 33% market share which is a large number of people you are alienating. (http://www.w3schools.com/browsers/browsers_stats.asp). Although this is declining and with the addition of IE9 soon this solution will become more viable. – User123342234 Jun 30 '10 at 23:12
1

I think it's a bit of a stretch to say you're alienating those users. The page they get just doesn't look _quite_ as good as what a Webkit or Firefox user would get. IMO, there's nothing wrong with progressive enhancement, and it's usually worth the trouble it saves coming up with methods that work across all browsers. – okalex Jul 01 '10 at 20:57
Designers can be extremely fussy (pixel perfect?!) and if they have designed something with rounded corners and it doesn't look like that for a 1/3 of people who use the web then they will be pissed. I know what you mean about progressive development however there is an alternative way of doing this that works across the board. It is not as elegant but when ie6-8 are long gone is when you adopt this completely. But as you said in your opening line, it does depend on your browser support. – User123342234 Jul 02 '10 at 00:58
True. Some designers can be fussy. But when you tell the stakeholder it'll take two minutes to implement rounded corners for 2/3 of their viewers, and two hours to implement it for the other third, requirements sometimes change, whether the designer likes it or not. – okalex Jul 06 '10 at 17:07

score 0 · Answer 2 · answered Jun 29 '10 at 22:20

0

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/

answered Jun 29 '10 at 22:20

Aaron Yodaiken

19,163
32
103
184

1

Normally I'd agree, but there's almost no reason to bother with sliding doors for a text area these days. It's usually such a small piece of the design that using CSS3 for progressive enhancement is the cleanest and easiest route. – derekerdmann Jun 30 '10 at 01:20

User123342234 · Answer 3 · 2010-06-29T22:51:00.043

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

no problem. Although not an elegant solution, it is the safest option to ensure it looks the same across all browsers. (note there was a discrepancy between my description and css. I said set the same color on borders as bg however I just removed the borders from top and bottom altogether.). You could also tweak it further to allow for different widths without having different top and bottom graphics for every size (eg. non-fixed width). (accept?) — User123342234, Jun 30 '10 at 23:08

score 0 · Answer 4 · answered Jun 30 '10 at 21:19

0

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

answered Jun 30 '10 at 21:19

Gil

11
1

T.T.T. · Answer 5 · 2010-06-29T22:18:35.043

-1

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;
}

edited Jun 29 '10 at 22:18

answered Jun 29 '10 at 21:57

T.T.T.

33,367
47
130
168

I have already used the exact code for textbox. Do you think it can work for textarea too? Like scrolling at right side – fawad Jun 29 '10 at 22:01
With these specification in CSS it can only work for single line. – fawad Jun 29 '10 at 22:08
This one has a multiline text box with rounded corners: http://bathew.com/playhouse/rounded-corner-form-elements/ – T.T.T. Jun 29 '10 at 22:16

rounded corner textarea

5 Answers5