Different first and line sub menu backgrounds

Could you advise the best way to implement different background for the first item and last item in a sub menu using css. The web design calls for curved edges to the background of the menu items on the first and last rows, whilst the other items in the sub menu have full standard colur rectangular background - any advice and guidance would be apprecated. (see attached graphics for effect wanted)

So far using MW2 we have created the top menu using the ability to add rounded graphics using <span> and <a> right and left cap images however in the sub menus these are only applicable on either the top and bottom rows.

Assuming you are using static menu items, you could just make custom css classes for your top and bottom items. By default, I would have your submenu have the basic css so it matches the middle items. Then define new classes (i.e. li.firstitem, li.lastitem) and apply the background images there.