How to make rounded corner textbox using css

Tuesday, April 1, 2008, 17:27
css, how-to, tips and technique, tutorial
9 comments

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

Popularity: 35% [?]

Tags: css, rounded corner, textbox, tips

» Textbox to accept only numbers (digits) using jquery
» Help me to become the first Blogging Idol
» Changing textbox value from dropdown list using Ajax and PHP
» How to execute PHP code entered from textbox or textarea

9 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?