My need for doing this is to create tabs with rounded corners, which would be supported on all browsers. I.E. does not have a way to create radius corners, like Firefox. Therefore, what I do is wrap the nav item as described above. This allows me to create each tab with 3 backgrounds: 1 for the left side of the tab (non-repeating image), one for the middle (repeating x), and one for the right (non-repeating).
As far as I know, there is not a way to create this effect with CSS on a single li tag.