<p>I was using jQuery plugins to create a rounded corner for my <code>&lt;li&gt;</code>, but it was not working on a lot of browsers and didn't support mouse over.</p>

<p>I am wondering what is the best way to use two images (left corner and right corner) as the left and right side with using <code>&lt;li&gt;</code>.</p>

You could put Divs inside your li's like so:
```
```
<li>
  <div class="lefcorner"></div>
  <div class='liContent'>Foo</div>
  <div class='rightcorner'></div>
</li>
```
```
That way you will both keep your semantics and will also have the cross-browser support of styling DIVs.