This is very general question.
I want to create a textarea with rounded corner with CSS. Please help me out.
A:
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;
}
Tommy
2010-06-29 21:57:40
I have already used the exact code for textbox. Do you think it can work for textarea too? Like scrolling at right side
fawad
2010-06-29 22:01:39
With these specification in CSS it can only work for single line.
fawad
2010-06-29 22:08:06
yeah those won't work, let me look around some more....
Tommy
2010-06-29 22:13:21
This one has a multiline text box with rounded corners: http://bathew.com/playhouse/rounded-corner-form-elements/
Tommy
2010-06-29 22:16:39
A:
Try these links:
http://roshanbh.com.np/2008/04/how-to-make-rounded-corner-textbox.html
http://www.knowledgesutra.com/forums/topic/25747-rounded-edges-for-textarea-with-css/
MikeU
2010-06-29 22:00:19
The first link you provided is only for the textbox not for textarea. In second link i don't know what kind of images he had made. They are not visible probably he has shifted them somewhere else. I'm getting 404 not found error. Please check somewhere else
fawad
2010-06-29 22:06:45
+1
A:
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/
aharon
2010-06-29 22:20:57
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
2010-06-30 01:20:38
+8
A:
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;
}
okalex
2010-06-29 22:29:30
+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
2010-06-29 22:51:15
Yeah, it won't work in existing versions of IE, but it will work in the soon-to-be-released IE9.
okalex
2010-06-29 22:54:42
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.
Josh Stuart
2010-06-30 23:12:43
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
2010-07-01 20:57:46
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.
Josh Stuart
2010-07-02 00:58:03
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
2010-07-06 17:07:20
A:
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
Josh Stuart
2010-06-29 22:45:49
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?)
Josh Stuart
2010-06-30 23:08:24
A:
You can use Jquery "jquery.com" and plug-in "DD_roundies" to apply rounded corners to dom elements http://dillerdesign.com/experiment/DD_roundies/
Gil
2010-06-30 21:19:02