How to make rounded corner textbox using css

Advertisement

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" />
</div>

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

CSS Code for rounded corner textbox:

.loginboxdiv
{
 margin:0;
 height:21px;
 width:146px;
 background:url(login_bg.gif) no-repeat bottom;
}

.loginbox
{
 background:none;
 border:none;
 width:134px;
 height:15px;
 margin:0;
 padding: 2px 7px 0px 7px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:11px;
}

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

Enter your email address and get free tutorials, tips and tricks of PHP, Ajax, JavaScript and CSS directly delivered to you email inbox:

27 Comments on “How to make rounded corner textbox using css”

  • Paul Giblock wrote on 6 May, 2008, 5:43

    Why use two different css classes? Why not just:

    .loginbox
    {
    margin:0;
    height:21px;
    width:146px;
    background:url(login_bg.gif) no-repeat bottom;
    }

    .loginbox input
    {
    background:none;
    border:none;
    width:134px;
    height:15px;
    margin:0;
    padding: 2px 7px 0px 7px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:11px;
    }

    ?? Seems smarter

  • Roshan wrote on 6 May, 2008, 12:11

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

  • iGuide wrote on 20 December, 2008, 2:49

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

  • nico wrote on 12 March, 2009, 20:17

    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

  • Mike S wrote on 17 March, 2009, 0:21

    http://pupungbp.erastica.com/wp-content/uploads/2007/07/round-corner1.html

    this one works

  • Shubhamoy wrote on 18 May, 2009, 4:08

    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;
    background:#fff;
    font-family:Arial, Helvetica, sans-serif;
    font-size:10pt;
    margin-left:auto;
    margin-right:auto;
    margin-top:15px;
    padding:30px;
    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;
    }

    BR,
    Shubhamoy

  • William Imhoff wrote on 19 May, 2009, 17:48

    Nice Tut. Thanks you guys made it easy.

  • smartwork wrote on 19 June, 2009, 9:54

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

  • Aswin wrote on 27 August, 2009, 19:10

    Thanks Shubhamoy

    Is there any option to make the corners round in IE6

  • nico wrote on 28 August, 2009, 7:29

    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.

  • Christoph wrote on 8 September, 2009, 13:50

    @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.

  • smartwork wrote on 11 September, 2009, 7:12

    …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.

  • nico wrote on 11 September, 2009, 7:13

    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.

  • Tapan wrote on 9 April, 2010, 11:06

    Hi
    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.

  • Mike S wrote on 9 April, 2010, 19:25

    @Tapan,
    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!
    Mike

  • a non e-mus wrote on 13 April, 2010, 16:44

    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

  • Julien wrote on 8 May, 2010, 4:53

    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!

  • james covert wrote on 12 May, 2010, 22:24

    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

  • Extend Studio wrote on 17 May, 2010, 11:31

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

  • Roshan wrote on 19 May, 2010, 4:20

    Thanks a lot for that link…..

  • Farooq Azam wrote on 3 June, 2010, 11:38

    Thanks a lot. That was helpful.

  • chandru wrote on 3 July, 2010, 7:26

    it’s super

  • lenin wrote on 11 July, 2010, 10:46

    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

  • haemophilus influenzae wrote on 20 February, 2011, 9:10

    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
    Thanks

  • Not relevant wrote on 8 March, 2011, 11:29

    Sombedy copied your post. And doesnt even work!!

    http://www.ashesh.com.np/how-to-make-rounded-corner-textbox-using-css/

  • Jaspal wrote on 25 March, 2011, 8:27

    Not a good example

Trackbacks

  1. PHP Coding School » Blog Archive » php tips [2008-04-01 18:21:19]

Write a Comment

 


Copyright © 2014 Roshan Bhattarai's Blog. All rights reserved.
Powered by WordPress.org, Custom Theme and ComFi.com Calling Card Company.