Comments on: How to make rounded corner textbox using css

By: nico

nico — Fri, 11 Sep 2009 07:13:10 +0000

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.

By: smartwork

smartwork — Fri, 11 Sep 2009 07:12:30 +0000

…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.

By: Christoph

Christoph — Tue, 08 Sep 2009 13:50:16 +0000

@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.

By: nico

nico — Fri, 28 Aug 2009 07:29:11 +0000

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.

By: Mike S

Mike S — Fri, 28 Aug 2009 04:57:18 +0000

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.

By: Aswin

Aswin — Thu, 27 Aug 2009 19:10:21 +0000

Thanks Shubhamoy

Is there any option to make the corners round in IE6

By: smartwork

smartwork — Fri, 19 Jun 2009 09:54:30 +0000

But those corner will not work in IE, is there any hack for that?

By: William Imhoff

William Imhoff — Tue, 19 May 2009 17:48:08 +0000

Nice Tut. Thanks you guys made it easy.

By: Shubhamoy

Shubhamoy — Mon, 18 May 2009 04:08:44 +0000

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

By: Mike S

Mike S — Tue, 17 Mar 2009 00:21:36 +0000

http://pupungbp.erastica.com/wp-content/uploads/2007/07/round-corner1.html

this one works

By: nico

nico — Thu, 12 Mar 2009 20:17:23 +0000

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

By: iGuide

iGuide — Sat, 20 Dec 2008 02:49:55 +0000

It doesn’t work, and I’m using one of the most popular browsers today. Sorry, try again!

By: Roshan

Roshan — Tue, 06 May 2008 12:11:12 +0000

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

By: Paul Giblock

Paul Giblock — Tue, 06 May 2008 05:43:45 +0000

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

By: PHP Coding School » Blog Archive » php tips [2008-04-01 18:21:19]

PHP Coding School » Blog Archive » php tips [2008-04-01 18:21:19] — Tue, 01 Apr 2008 18:31:57 +0000

[...] 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/ [...]