Home CSS How to make rounded corner textbox using css

How to make rounded corner textbox using css

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

15 years ago
Ashesh

सयौ थुङ्गा फूलका हामी एउटै माला नेपाली, Welcome to my webpage. I'm from the Himalayan Country of Nepal. Well talking about me, I like mostly Web programming and Designing and furthermore I like Philosophical literature, Photography, Social networking. And I am Romantic and Sentimental person to some extent. Read more...

View Comments

  • These are really great ideas in concerning blogging.
    You have touched some good points here. Any way keep up wrinting.

  • Hello, this weekend is good designed for me, for the reason that this moment i am reading
    this wonderful educational post here at my house.

  • Having read this I believed it was really enlightening.
    I appreciate you spending some time and energy to put this
    short article together. I once again find myself
    spending a lot of time both reading and commenting. But so what, it was still worth it!

  • You actually make it seem so easy with your presentation
    but I find this topic to be actually something which I think I would never understand.
    It seems too complex and extremely broad for me. I'm looking forward for your next post, I will try to get the hang of it!

  • Nice post. I was checking continuously this blog and I am inspired!
    Very useful info particularly the last phase :) I
    maintain such info much. I used to be seeking this certain info for a long time.

    Thank you and good luck.

  • Hi there! This is kind of off topic but I need some guidance from an established blog.
    Is it difficult to set up your own blog? I'm not very techincal but I can figure things out pretty quick. I'm thinking about setting up my own but I'm not sure where to start. Do you have any points or suggestions? Thank you

Leave a Comment

Related Post