How to make rounded corner textbox using css

Tuesday, April 1, 2008, 17:27
css, how-to, tips and technique, tutorial
15 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
» Changing textbox value from dropdown list using Ajax and PHP
» Help me to become the first Blogging Idol
» How to execute PHP code entered from textbox or textarea

15 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?
Aswin wrote on 27 August, 2009, 19:10
Thanks Shubhamoy

Is there any option to make the corners round in IE6
Mike S wrote on 28 August, 2009, 4:57
Rounded corners using no images, works on my XP browsers:
IE 8
FF 3.5.2
Opera 10
Safari 4.0.2

http://webdesign.about.com/od/examples/l/bl_cssroundedcorners.htm

Rounded Box Demo

body {
background-color: #FFF;
margin: 0px;
padding: 0px;
font-size: 16px;
font-family: Georgia;
}

div.rounded-box {
position:relative;
width: 433px;
background-color: #B0D1E1;
margin: 3px;
}

/* GLOBAL ATTRIBUTES */
div.top-left-corner,
div.bottom-left-corner,
div.top-right-corner,
div.bottom-right-corner{
position: absolute;
width: 20px;
height: 20px;
background-color: #FFF;
overflow: hidden;
}

div.top-left-inside,
div.bottom-left-inside,
div.top-right-inside,
div.bottom-right-inside {
position: relative;
font-size: 150px;
font-family: arial;
color: #B0D1E1;
line-height: 40px;
}

/* SPECIFIC ATTRIBUTES */

div.top-left-corner { top: 0px; left: 0px; }
div.bottom-left-corner { bottom: 0px; left: 0px;}
div.top-right-corner { top: 0px; right: 0px;}
div.bottom-right-corner { bottom: 0px; right: 0px;}

div.top-left-inside { left: -8px;}
div.bottom-left-inside { left: -8px; top: -17px;}
div.top-right-inside { left: -25px;}
div.bottom-right-inside { left: -25px; top: -17px;}
div.box-contents {
position: relative;
padding: 18px;
color: #000;
}

•
•
•

•
Contents go here, but it must be at least two lines to look any good.
nico wrote on 28 August, 2009, 7:29
I just gave up trying with all the hacks to do rounded corners.

My politic is now: if you use a proper browser (e.g. FF, Opera, Safari etc), which supports border-radius (or its “equivalents” -moz-border-radius and -webkit-border-radius) you’ll have rounded corners. Even with borders. If you use a crappy browser (e.g. IE) you just skip those CSS properties and see straight borders. Content is safe and readable in ALL browsers, just less pretty if you use IE. But that’s absolutely an user choice.

IE6 I don’t even consider as a browser… c’mon we’re in 2009, you just don’t need to support IE6 anymore.
Christoph wrote on 8 September, 2009, 13:50
@nico: i think this is a bit narrowminded. Ok i can understand that to the graphic designing community IE is seen as hell. but in fact if you design a website it’s to be used by everybody including the massive number of IE-users. So i think it’s best to make sure thaat they also have a nice site to look upon an not just the alternatives who aren’t the standard browser.
smartwork wrote on 11 September, 2009, 7:12
…the massive number of IE-users. – THIS IS GONE, if you say this on 2004 and 2005 it is acceptable, now most of them moved to FF or Chrome. first incompatible browser in my list is IE, user of the IE browser is less than 35% in this world.
nico wrote on 11 September, 2009, 7:13
Hi Christoph,
no, it’s not narrow minded and, no, it does not prevent IE users to use the site.
Simply if you use IE you see square corners. If you use a proper browser you see rounded corner.
Everybody can USE the site, IE browsers just see a downgraded versions.