How to make rounded corner textbox using css

In this post, I’ll explain to you how to make the rounded corner textbox using a image and css. Text box is placed over a container element whose background image is the key of the rounded corner textbox.

This is the image which I’ve used in my example, don’t click and start typing it just a image for now.

Now let’s look at the html and css code to display rounded corner textbox.

HTML Code for rounded corner textbox

<div class="loginboxdiv">
  <input class="loginbox" name="username" type="text" />

The container “div” contains the background image of rounded corners and inside of that the real textbox resides.

CSS Code for rounded corner textbox:

 background:url(login_bg.gif) no-repeat bottom;

 padding: 2px 7px 0px 7px;
 font-family:Verdana, Arial, Helvetica, sans-serif;

The above CSS code is straight forward, the height and width of the class “loginboxdiv” should be exactly same as the above image which is of “146X21″ pixels. The class “loginbox” is the class of the textbox. As you can see in the css, border is removed and height , width and padding are managed according to the size of the background image.

Working Example- You can type in the rounded corner textbox:

Download Code:

Click here to download full source code

27 thoughts on “How to make rounded corner textbox using css

  1. Paul Giblock

    Why use two different css classes? Why not just:

    background:url(login_bg.gif) no-repeat bottom;

    .loginbox input
    padding: 2px 7px 0px 7px;
    font-family:Verdana, Arial, Helvetica, sans-serif;

    ?? Seems smarter

  2. well one css for the outer div to display image and another for hiding border from textbox

  3. It doesn’t work, and I’m using one of the most popular browsers today. Sorry, try again!

  4. Doesn’t work… the input is on the left of the image.
    (using Firefox 3.0.7 under GNU/Linux)

    To make it work just substitute the pre with a div

  5. Hi Admin,
    An image is used to get the effect but using CSS3 we could get the same effect without loading any image. Here goes the code:

    .box {
    width: 680px;
    font-family:Arial, Helvetica, sans-serif;
    border-top:1px solid #CCCCCC;
    border-left:1px solid #CCCCCC;
    border-right:1px solid #999999;
    border-bottom:1px solid #999999;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;


  6. Nice Tut. Thanks you guys made it easy.

  7. smartwork

    But those corner will not work in IE, is there any hack for that?

  8. Thanks Shubhamoy

    Is there any option to make the corners round in IE6

  9. nico

    I just gave up trying with all the hacks to do rounded corners.

    My politic is now: if you use a proper browser (e.g. FF, Opera, Safari etc), which supports border-radius (or its “equivalents” -moz-border-radius and -webkit-border-radius) you’ll have rounded corners. Even with borders. If you use a crappy browser (e.g. IE) you just skip those CSS properties and see straight borders. Content is safe and readable in ALL browsers, just less pretty if you use IE. But that’s absolutely an user choice.

    IE6 I don’t even consider as a browser… c’mon we’re in 2009, you just don’t need to support IE6 anymore.

  10. Christoph

    @nico: i think this is a bit narrowminded. Ok i can understand that to the graphic designing community IE is seen as hell. but in fact if you design a website it’s to be used by everybody including the massive number of IE-users. So i think it’s best to make sure thaat they also have a nice site to look upon an not just the alternatives who aren’t the standard browser.

  11. smartwork

    …the massive number of IE-users. – THIS IS GONE, if you say this on 2004 and 2005 it is acceptable, now most of them moved to FF or Chrome. first incompatible browser in my list is IE, user of the IE browser is less than 35% in this world.

  12. Hi Christoph,
    no, it’s not narrow minded and, no, it does not prevent IE users to use the site.
    Simply if you use IE you see square corners. If you use a proper browser you see rounded corner.
    Everybody can USE the site, IE browsers just see a downgraded versions.

  13. Tapan

    Actually it didn’t work in all the browsers.
    So we need the code that support all the browsers.
    I didn’t get as i needed.

  14. Mike S

    you’re getting code for free, and it sounds like you want refinements made, but your are being completely unhelpful. You could have posted what browsers on what OS’s you saw problems with, and you could even have posted what those problems were. I think you might consider the people who release the code and then make updates to it and how they feel, it can be a lot of headaches getting the code to work in every browser, and posts like yours can create a lot of stress while not offering anything useful at all. You couldn’t take one minute to include some details? What if the person posting the code wrote back, “you didn’t give me what i need”, so you are now wasting time with two messages that didn’t convey any useful information? In the future I hope you will consider doing your part when you get free code and ask for free support, or you could go find someone and pay them to fix it!

  15. a non e-mus

    nice style, but doesn’t work (meaning couldn’t select and/or enter text) for me – using ff 3.6

    yes, i used the “Working Example” box

  16. Julien

    It works perfectly, very helpful!
    (I didn’t test your entire code, I just took your concept and rewrote it my way, maybe those guys are right and it doesn’t work, but really, I don’t really care)
    I also did the same concept with submit buttons.
    I tested my code in all browsers; it even worked on IE 6.
    Thanks bro!

  17. Thank you so much for the frequent information, my css skills are proving more than admirable after revising information on your site.

    Gracious leaders take us through

  18. You can have a look as well at FlexiPanels CSS – a dreamweaver extension that creates rounded corner CSS boxes without coding.

  19. Thanks a lot for that link…..

  20. Thanks a lot. That was helpful.

  21. chandru

    it’s super

  22. thankyou Shubhamoy really helpful for me and but the box is little big in your exam
    and width and pading reduce to make little box may help some one want to hv smaller box

  23. It works great, very helpful!
    (I have not tested my code, I simply take the concept and rewrote it my way, maybe those guys are correct, and it does not work, but really, I do not really care)
    I also do the same with the concept of the buttons.
    I tested my code on all browsers, even IE has the sixth

  24. Not relevant

    Sombedy copied your post. And doesnt even work!!

  25. Not a good example

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>