Howto style unordered list to display list items in rounded corner box

Answer 1

Here's a pretty good example of rounded corners using CSS3: CSS3 Rounded corners

This will only work in Firefox and Safari though.

Answer 2

Using only the UL tag, I don't know a pure CSS 2 solution for variable height block (for fixed-height: you have the sliding doors technique).

You might want to look at a JS+CSS solution: nifty corners.

Answer 3

Have a look at jQuery Corner for a more rounded cornering solution ;-) It does involve JS as well as CSS, but has a lot of out-of-the-box flexibility.

Answer 4

If you can tag the last li, you can put the bottom corners on that - My rounded corner list.

ul {background:transparent url(rc_top.jpg) 0 0 no-repeat;width:459px;padding:20px 0 0 0;}
ul li {background-color:#ebebeb;padding-left: 40px;}
ul li.last {background:transparent url(rc_bot.jpg) 0 bottom no-repeat;padding-bottom:20px;}

<ul>
    <li>one</li>
    <li>two</li>
    <li class="last">three</li>
</ul>

If IE6 and 7 are not a concern, you can use ul li:last-child instead of ul li.last.