How to make rounded corner textbox using css

Posted on April 1, 2008
Filed Under css, how-to, tips and technique, tutorial

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: 27% [?]

Follow me on twitter at http://twitter.com/roshanbh.

» 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

Comments

3 Responses to “How to make rounded corner textbox using css”

PHP Coding School » Blog Archive » php tips [2008-04-01 18:21:19] on April 1st, 2008 6:31 pm

[...] Tips to create rounded corner textbox using css By Roshan 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. Roshan Bhattarai’s Blog - PHP… - http://roshanbh.com.np/ [...]
Paul Giblock on May 6th, 2008 5:43 am

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 on May 6th, 2008 12:11 pm

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