How to make rounded corner textbox using css

Home > CSS > How to make rounded corner textbox using css

How to make rounded corner textbox using css

September 9th, 2009 Ashesh Leave a comment Go to comments

css-round-corner 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

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:

by roshanbh

ashesh Recommends

How To Make A Stop Motion Film (figurethingsout.com)
How To Make Money Online Tips – How to Increase Your Blog Traffic (Does SEO Work)