Question

In this fiddle http://jsfiddle.net/dAHqe/2/ I’ve created examples for the 2 main uses (that I’ve seen) of border-radius for lists.

1. Apply border-radius (and therefore background-color) to the container (a div or a ul).
2. Apply border-radius (and therefore background-color) to the first and last content items (lis or nested divs) via the :first-child and :last-child pseudo-classes.

At first glance, it looks like the first way (applying it to the container) is much more concise, yet I see the second way all the time.

Is there any good reason (i.e., scalability) to use the second way?

Update: This is for a mobile app, so I won’t need the :hover pseudo-class.

Answer 1

Personally, in the examples you’ve given, I’d always just go with the simple option and put it on the container.

However, reasons for doing it the other way:

• Maybe you don’t have a container, and you can’t change the code to add one.

• You have some reason to want the flexibility to change individual list items in a way that having a single container wouldn’t work. eg Maybe you want to make them semi-opaque on hover?

• You have to work around an awkward HTML structure. I had a case like this a while back where I had to add rounded corners to cells in a complex table. The cells in question were sub-heading rows and columns in a bigger table, but the way it all fitted together meant I had to put the rounded corners individually into separate cells. It was fiddly and awkward but ended up looking how they wanted it.

• The coder doesn’t know CSS all that well and simply cribs it from somewhere else that does it that way.

Those are the only reasons I can think of. But I suspect most cases fall into one or other of those.

Hope that helps.