Posted By

reneolivo on 06/24/08


Tagged

css input text corner round


Versions (?)

Who likes this?

14 people have marked this snippet as a favorite

bumz
jonhenshaw
freeheelvrmnt
monkeygod
monapdx
sulfurito
l1r
Hollow
cburyta
seanpowell
michellebracken
wirenaught
ringo380
lookingforsome


Text Input with rounded corners


 / Published in: HTML
 

URL: http://www.809estudio.com

This HTML/CSS shows how to make text inputs with rounded corners in the most basic way (it doesn't expand according to its width).

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>A nice Text Box</title>
  5. body * {
  6. font-family: Georgia, 'Times New Roman', Times, serif;
  7. font-style: italic;
  8. }
  9.  
  10. label.rounded {
  11. padding-top: 5px;
  12. font-weight: bold;
  13. color: #555;
  14. }
  15.  
  16. input.rounded {
  17. border: 0;
  18. background: url(http://img181.imageshack.us/img181/53/textroundbv8.gif) top left no-repeat;
  19. width: 190px;
  20. height: 25px;
  21. padding: 3px 5px;
  22. font-size: 85%;
  23. color: #399;
  24. }
  25. </head>
  26.  
  27. <label class="rounded">My Input:</label>
  28. <input class="rounded" type="text" value="Some text..." />
  29. </body>
  30. </html>

Report this snippet  

You need to login to post a comment.