Best way to create rounded corners on input box?

[smctainsh 2]

Hi All,

I'm doing some coding and the design calls for some rounded input boxes and submit buttons with varying lengths. I am sort of in a bit of a 'pickle' at the moment as to deciding which is the best way to go about this. I was thinking of one of these two options:

1) Using NiceForms (which I personally reckon seems like overkill for simply rounded input and submit form fields)

2) Using the following code:

<div class="inputleft"></div>
<input type="text" size="20" name="text" />
<div class="inputright"></div>

Then styling the divs accordingly.

All feedback is appreciated.

Thanks,

Smctainsh

[Pox 0]

Hmm... if they're (or you're?) that insistent on the rounded input boxes then try curvycorners, it's extremely light-weight and should work on any element, but it does need javascript enabled... the divs method wouldn't require any scripting but would have quite obfusticated markup. Personally, I'd go for the second as I really don't care if people viewing the source of my website aren't aesthetically pleased by the mounds of plaintext. :p

[jukeboxhero52 1]

You could actually get by with something like this:

<div class="inputLeft"><input type="text" blah blah ></div>

Then in the CSS - you'd have a background image of the DIV to the left, and then have the input box with a background image floating to the right. It would be very similar to the the "sliding door" effect used in tabs. Granted, its only 1 less div, but I think it makes for a bit better markup.

[Pox 0]

Good idea, jukeboxhero52... didn't think of that one.

Oh for CSS3...

input.text {
	border:2px solid #333333;
	border-radius:10px;
}

Can't wait until that stuff becomes usable.

[Not Cool 0]

Good idea, jukeboxhero52... didn't think of that one.

Oh for CSS3...

input.text {
	border:2px solid #333333;
	border-radius:10px;
}

Can't wait until that stuff becomes usable.

Looks amazing, I can't wait (I'm using NiftyCorners for my site right now), when will it become a standard?

[smctainsh 2]

Good idea, jukeboxhero52... didn't think of that one.

Oh for CSS3...

input.text {
	border:2px solid #333333;
	border-radius:10px;
}

Can't wait until that stuff becomes usable.

It'll be great once that is implemented and available. :)

Thanks for the assistance everyone. I've decided to use a CSS method as opposed to a javascript method, and I think I'll implement something similar to what jukeboxhero52 suggested.

Thanks again for all of your help everyone. :)

Smctainsh

[Pox 0]

Looks amazing, I can't wait (I'm using NiftyCorners for my site right now), when will it become a standard?

Well different portions of CSS3 are currently supported by gecko, safari and opera and both gecko and opera should have close to full support by the next full version number... but considering even IE7 doesn't have complete compliance to CSS1 yet and only supports a bit of CSS2, it'll probably IE10 before it becomes viable for practical sites... either that or a real big boom in firefox takeup. ;)

If you want to play with the rounded corners, -moz-border-radius works in firefox 2 / latest seamonkey.

[The_Decryptor 1,105]

I'll go down in levels of compatibility (first = highest)

1. GIF images
   
2. PNG images
   
3. border-radius
   

GIF images will work in probably anything

PNG images will work in IE6 and such (with mods), and Opera, Safari, IE7, etc. and such

border-radius will work in latest versions of Firefox, Safari (well, WebKit) and Konqueror (no idea about opera)

Now, border-radius is part of the CSS3 Backgrounds and Borders Module, and due to how CSS3 is being made, individual modules can reach implementation state before others (i think one module is already at that stage), but because this certain module is still draft stage, and can change, the implementations in engines have a testing prefix (e.g. -moz-border-radius,-webkit-border-radius), and some implementations still have bugs or render oddly (e.g. Gecko's)

Now, wasn't that a nice bit of useless facts :p

Edit: not -gecko-border-radius, it's -moz-border-radius >.<

[Pox 0]

^ he's right. ;)

btw, -moz-border-radius in action: http://pox.cerebrojd.net/4.html

I've used -moz-margin-end to compensate for the 1px bug -moz-border-radius presents at the moment.

[The_Decryptor 1,105]

http://doyouwanttodie.com/files/web_stuff/...d%20corners.png

As you can see, rounded corners look great in the latest WebKit build (and that not all of them render, haven't checked why)

Edited April 20, 2007 by The_Decryptor

[Pox 0]

http://doyouwanttodie.com/files/Pictures/r...d%20corners.png

As you can see, rounded corners look great in the latest WebKit build (and that not all of them render, haven't checked why)

Wow, look good... yay for mac antialiasing :p none of them should be rendering at all though, I didn't put any webkit or general properties in, only -moz O_o

I'll put in -webkit ones now.

[The_Decryptor 1,105]

I put in the -webkit- bits

Oh, and from reading the css spec, border-radius only takes one value (which makes sense with WebKit's rendering, it's only taking the first value, which is either 0px or 10px), for individual corners there are other values.

IMO, that's wrong, border-radius should be able to combine all the values, but there is a reason the spec and implementation's are still draft stages ;)

[Pox 0]

I put in the -webkit- bits

Oh, and from reading the css spec, border-radius only takes one value (which makes sense with WebKit's rendering, it's only taking the first value, which is either 0px or 10px), for individual corners there are other values.

IMO, that's wrong, border-radius should be able to combine all the values, but there is a reason the spec and implementation's are still draft stages ;)

Name: border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius, border-radius

Value: <length> <length>?

Seems to me it takes 2... I dunno. That'd be the reason most of it isn't working in safari though - safari's spewing at the multiple specifications and not rendering them at all.

[The_Decryptor 1,105]

the Name: bit is the different properties (the section is entitled "The 'border-radius' properties"), i have no idea why the two "<length> <length>?" values though.

And i got it working in Safari, it only takes 1 value for border-radius, and needs to have individual corners specified as the CSS rules (which are different to the gecko rules, gecko has the wrong rules though)

http://doyouwanttodie.com/files/web_stuff/CSS3/4.html < renders the same in Safari and Firefox.

http://doyouwanttodie.com/files/web_stuff/...corners%202.png < in latest WebKit

Edit: i just noticed a bug in the rendering, look at the navigation "tab", the antialiasing is "off"

Edited April 20, 2007 by The_Decryptor

[Pox 0]

Man those safari corners are smooth.

http://www.w3.org/TR/css3-background/#the-border-radius - it seems that the two radius values allow you to specify a corner that is rounder on 1 axis.

[The_Decryptor 1,105]

Yep, that's it, border-radius:10px 20px; gives a funny corner.

http://doyouwanttodie.com/files/web_stuff/...corners%203.png

Ok, messing around with some CSS3 rules, and i have to say, it rocks

testing RGBA colours in Safari (Firefox 2 screws this up): http://doyouwanttodie.com/files/web_stuff/...ari%20rocks.png

Without RGBA: http://doyouwanttodie.com/files/web_stuff/...ss3%20rocks.png

Test page: http://doyouwanttodie.com/files/web_stuff/...0test/css3.html

Test page 2 (with RGBA): http://doyouwanttodie.com/files/web_stuff/...ss3-safari.html

Edited April 20, 2007 by The_Decryptor

[Pox 0]

Oh I love that default serif font on mac... or is it just the way it antialiases it? Anyway, looks much better than it does in windows. (ewwww... but I can't test for IE on linux.)

[The_Decryptor 1,105]

I have Tahoma installed (comes with office for mac and some other things i think), and OS X's great font rendering does have something to do with it.

In the CSS3 page i did, that's using Lucida Grande (as you would see if you checked page source)

[Pox 0]

I was talking about the Serif font, not Sans-Serif... but yeah, all of them look great :D

And yeah, Gecko hasn't implemented rgba in trunk yet, but you can use -moz-opacity from 0 to 1.

[The_Decryptor 1,105]

Ahh, i get what you mean, yeah, that's the default serif font ( it's Times at 16px and italic, Safari doesn't give me much info on what it uses, it only shows me the default and fixed width font choices).

and while opacity is ok, it's simplistic, it controls the blending of the whole element (and sub elements), whereas RGBA colours can be applied to anything that takes a colour (font, border, etc.).

I'm still waiting on more support for SVG and SMIL animation though, a mix of those items with HTML would make for some great sites (e.g. shrink this element, rotate this one, scale and skew that one, etc.)