How can i create a rounded-corner textbox in html (or css) ??
This Question has been solved and asker verified All Experts Exchange premium technology solutions are available to subscription members.
Experts Exchange has been collecting answers to technology questions since 1996…3 million and counting! If you have a question, chances are we already have your answer.
If you can't find the exact answer you're looking for, ask our exclusive community of 50,000 experts. You’ll get a personalized answer from a trusted professional.
Thousands of free tech tips, tricks, how-to’s and tutorials are available in our peer reviewed articles section. See for yourself how smart our experts are, no login required.
Save solutions to your questions, answers you’ve discovered through searching plus helpful articles in your personal knowledgebase for easy future access.
Access the answers to your technology questions today.
30-day free trial. Register in 60 seconds.
Members of the expert community talk about why the experience at Experts Exchange is different than what you will find anywhere else.
Try it out and discover for yourself.
30-day free trial. Register in 60 seconds.
Join the community of experts here and help other tech pros by answering question in your area of expertise. You can earn FREE access to all Experts Exchange's premium features and resources.
atleast not cross browser.. yet.
mozilla has some limited support.
eg.
CSS:
#rounded-textbox {
-moz-border-radius-bottoml
-moz-border-radius-bottomr
-moz-border-radius-topleft
-moz-border-radius-toprigh
background-color:#DDDDDD;
border:1px solid #7E94A6;
padding-left:2px;
padding-right:2px;
width:15em;
}
HTML:
<input size="20" name="roundedTextbox" title="Enter some text" id="rounded-textbox"/>
Here's another way someone has done it. but IMO its not worth the hassle:
http://www.webxpert.ro/and
basically they made an image with the rounded textbox drawn and used it as a background. then then put real textboxes without any borders and lined them up to fall inside the drawn textboxes in the image background.
...of course I suppose this is technically a CSS solution for the HTML TA but hey, they've completely stripped the HTML spec so we've got nothing but cross-over. Here ya go:
<html>
<head><title>Rounded Input</title></head>
<body>
<input type="text" style="background-image:ur
</body>
</html>
...of course you'll probly want a slightly more complex page with forms and such but I'm sure you get the gist. rounded.gif should be an image of exactly what you want your textbox to look like :) and of course that's a completely different question for a different TA.
Cheers,
Jesse
you can do it using html,css
http://www.experts-exchang
sundaramkumar, the asker is asking about textboxes. i.e. form fields. not just divs.
jessegivy, the background image may seem to work in certain browsers but form fields and default behavior is very different across browsers and operating systems and css applied also varies greatly in rendered appearance.
...can I just say that's what I HATE about CSS. Or maybe it's browser software that's the real problem! Another solution that could work would be to use opacity and just layer an image of the text box (visually the way you want it to look) over the top of the text area...
http://www.quirksmode.org/
PERFECT! I knew I had the solution in my head somewhere!
What do you say Mr. Minus any props?
Hi
i used the
#rounded-textbox {
-moz-border-radius-bottom
-
-moz-b
-moz-
bac
border:1
padding-left:2px;
p
wid
}
n
Business Accounts
Answer for Membership
by: VirusMinusPosted on 2007-07-19 at 17:04:26ID: 19527561
you can't