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% [?]
Related Posts
» 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







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
well one css for the outer div to display image and another for hiding border from textbox
It doesn’t work, and I’m using one of the most popular browsers today. Sorry, try again!
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
http://pupungbp.erastica.com/wp-content/uploads/2007/07/round-corner1.html
this one works
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
Nice Tut. Thanks you guys made it easy.
But those corner will not work in IE, is there any hack for that?