We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you two Citrix podcasts. Learn about 2020 trends and get answers to your biggest Citrix questions!Listen Now

x

rounded-corner textbox with html / css

Medium Priority
16,238 Views
Last Modified: 2013-11-19
How can i create a rounded-corner textbox in html (or css) ??
Comment
Watch Question

Top Expert 2007

Commented:
you can't
Top Expert 2007

Commented:
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"/>
Top Expert 2007

Commented:
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.
jessegivyDeveloper
CERTIFIED EXPERT

Commented:
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...
Developer
CERTIFIED EXPERT
Commented:
...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:url('images/rounded.gif');border:0px solid;" />
      </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

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
Top Expert 2007

Commented:
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.
jessegivyDeveloper
CERTIFIED EXPERT

Commented:
...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?
jessegivyDeveloper
CERTIFIED EXPERT

Commented:
...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
jessegivyDeveloper
CERTIFIED EXPERT

Commented:
>>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.
Top Expert 2006

Commented:
VirusMinus's suggestion was helpful
thanks
Top Expert 2006

Commented:
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?

 
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.