Hiya! 
I’ve always wanted to know, how does eBay add rounded corners to the “Seller info” and “Other item info” boxes on a product description page, using an [URL=“http://pics.ebaystatic.com/aw/pics/cmp/ui/sprpanelcrns.png”]image containing corners?
Cheers.
F.Danials
They use tables and for the top row they use a <b> and an <i> inside of a <td> and place the backgrouund images there
They do the same for the bottom 
Really? - I though they used CSS with Div’s, because if you turn CSS off, all the corners disappear!
They still use css in the tables to supply the background images.
The images are all in one sprite and are just placed using the background-position to manipulate which image is placed where and also to allow different coloured borders etc.
It can be done without tables but will probably still need the same amount of code as a table because you always need hooks to hang the corners on.
They do lol, just random elements in the HTML can’t supply background images :P. They merely use tables to easily place the corners for the images.
Paul beat meh to it 
How would you go about doing it using only CSS?
The above page ONLY does do it in CSS. I think you are trying to ask how to not do it with tables, and all will require a certain amount of elements but … try looking here
http://www.cssjuice.com/25-rounded-corners-techniques-with-css/
There are many ways to do rounded corners :).
jquery has a nice rounded corner effect if you dont mind using JS
I don’t want to do it just using CSS, I don’t mind using images. What’s the best way of adding rounded corners to an element (i.e. <div>) using a single image containing corners?
I think Ryan gave you a link too a number of example in his post above.
It all depends on the criteria you want as to how you accomplish it.
Is the element a fixed or fluid width?
Do you need transparent corners?
Do you need borders?
Do you need shadows?
Here are a variety of techniques to look at but make sure the you choose suits your requirements:
One image with transparent corners.
http://www.pmob.co.uk/temp/liquid-round2boxes.htm
more
Or without using images at all.
How can we fail to mention CSS3’s implementation?
Only works in Firefox, Safari and Chrome currently but the others will catch up and implement it soon. If rounded corners aren’t a deal breaker for you - The browsers that support them can have the extra 4 pieces of flare.
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
I know that I didin’t mention it because of lack of IE support, even IE8. The total IE takes up majority of hte market (over 50%) so…I didn’t view it as an option. Perhaps once IE takes support I will mention it.
PS-Opera doesn’t support it as well. IE9 won’t be released for a while and Opera hasn’t added them thus of yet (must be waiting for CR I’m guessing)
Make sure you include a non-prefixed version of the property too.
css-background became a CR on 17th Dec last year. Presto 2.3 - the next version of Operas layout engine - supports ‘border-radius’, amongst other things.
css-background became a CR on 17th Dec last year. Presto 2.3 - the next version of Operas layout engine - supports ‘border-radius’, amongst other things.[/QUOTE]
Ah I hadn’t kept up with that from W3…too much to read in such little time…thanks for the info James
Yep, and without a prefix. Should work in 10.50 pre-alpha.
So that means you guys are the first to support css3-background without the need for prefixes - sweet!
I choose not to add stuff that isn’t yet used. When the time comes I will search and replace.
Sweeet.
The total IE takes up majority of hte market (over 50%) so…I didn’t view it as an option
I understand that argument, and for some cases it might be valid - but I’m bored of writing rounded corner boxes to be honest - I’m quite ok with the corners not being a mandatory design requirement.
After using it for a few months now I can’t imagine going back to the older methods.
Ignorance Is Bliss
That is nice, but I’d give more credit to webkit and gecko for getting a testing version into the wild early on.
cheers,
gary
Even though they provided differing syntactical implementations?
Yep. Isn’t that a reason for having the proprietary properties/values, to test not just the implementation, but the understanding of the spec? In discussion at Bugzilla, whether to emulate the webkit ‘variants’ was brought up;
"> Also, I’m assuming there’s no need to support the -webkit- variant of these
> properties.
Absolutely right, keep to the standard, it’s complex enough without introducing
variants."
It would have been much better were IE and Opera to have worked on this kind of thing out in the open so that all may discuss with, and learn from the others.
This vague spec reminds me of the problems with {display: run-in;} which Opera and Safari have implemented; poorly. It would have been much better to have used a proprietary property value, as many of the bugs in present implementations will cause breakage when fixed.
cheers,
gary