best method of rounding corners

[schoterson]

Not really EXTJS stuff but since there is a boxWrap method I thought I'd ask. I'm using niftycorners for some of my stuff, rounded corners that don't require a border color. I've also written one that sorta follows nifty but is more specific to our intranet, it does border colors. Both of these write out one b element with 4 b elements inside and it sets margins and background colors to pull off the rounded look. The question I suppose is which performs better, html elements like the b one or the Ext.boxWrap implemtention that uses images for the corners?

Since we round corners on components that have different colors I would think images would be tricky as a .gif would need to be produced for each color variation, and if we needed to change the radius then new images would be needed?

Having the html code hard coded to the page isn't an option so using functions that get passed an el is going to occur regardless of which way we do things.

[BernardChhun]

I personnally prefer the nifty corners technique since it doesn't require Javascript to work.
However, I use a whole lot of boxWrap() in my app since users needs javascript anyway to make the whole app work.

as for answering your question, i'd say the nifty technique performs better since no javascript is needed to make it work. It needs some CSS files though but that is still faster than loading some CSS and the javascript to make the magic happen.

[hunkybill]

I personnally prefer the nifty corners technique since it doesn't require Javascript to work.
However, I use a whole lot of boxWrap() in my app since users needs javascript anyway to make the whole app work.

as for answering your question, i'd say the nifty technique performs better since no javascript is needed to make it work. It needs some CSS files though but that is still faster than loading some CSS and the javascript to make the magic happen.

Hi Bernard,

Are you talking about this nifty corners: http://www.html.it/articoli/niftycube/index.html

If yes, you use it without javascript? If no.. ignore... ignore.. ignore... :)

[mystix]

Nifty Corners (http://www.html.it/articoli/nifty/)
More Nifty Corners (http://webdesign.html.it/articoli/leggi/528/more-nifty-corners/)
Nifty Corners Cube (http://www.html.it/articoli/niftycube/)


only the first link presents a simple CSS-only (and js-less) implementation (http://www.html.it/articoli/nifty/nifty1.html) of rounded corners, but proceeds to introduce js convenience methods later in the article to overcome the hassle of manually creating the required markup.

it's still pretty neat though.
:-? now we just need someone to convert that into an Ext.ux... ;)

[BernardChhun]

Hi Bernard,

Are you talking about this nifty corners: http://www.html.it/articoli/niftycube/index.html

If yes, you use it without javascript? If no.. ignore... ignore.. ignore... :)

nope not that one, but the first link mystix has posted.

[dantheman]

I've used Steffen Rusitschka's ShadedBorder (http://www.ruzee.com/blog/shadedborder) with success.

--dan

[mystix]

looks like most implementations depend on js in one way or another...
hmmm....

[schoterson]

Sorry for the very late response and I'm not trying to bring this thread back to life. I was simply trying to ask is it better to use divs and css (js sometimes to create the divs) or divs and background-images.

Thanks everyone for their thoughts, I am using nifty cube for most of my rounding currently though am working with our UI designers to come up with images for the boxWrap() method.

I've updated nifty cube to leverage Ext methods when appropriate but a full blown conversion didn't seem to make sense.