rounded-corner textbox with html / css

you can't

atleast not cross browser.. yet.

mozilla has some limited support.

eg.

CSS:

#rounded-textbox {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
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/andrei/2005/12/20/rounded-border-textbox/

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.

Woh, why not remove the border and use a background-image in the input itself?  Then you'll have to adjust the text placement so it looks right...

you can do it using html,css

https://www.experts-exchange.com/questions/22645473/rounded-corner-with-border.html

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/dom/inputfile.html

PERFECT!  I knew I had the solution in my head somewhere!

What do you say Mr. Minus any props?

...I used the above referenced link to create a multi-select file upload tool (should've created an applet), but you should be able to adapt the same principal to paste the image over you're textbox but allow focus of your textbox while it stays visually in the background.

Cheers,

jesse

>>you can't

only 12 percent of the population uses browsers other than IE, some developers have a small controlled client base that uses IE exclusively, or can be dominated to do so.   I wish I could rely on such a group.

VirusMinus's suggestion was helpful
thanks

Hi
i used the
#rounded-textbox {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background-color:#DDDDDD;
border:1px solid #7E94A6;
padding-left:2px;
padding-right:2px;
width:15em;
}

now how to change the font style for this text box?