Css How to add round corners when hover li element?

Question

I want to add round corners to a li element when hovered:

My HTML:

<ul>
<li id="menufirst">
<span id="menu1"></span>
<a href="#">Menu 1</a>
</li>
<li>
<span id="menu2"></span>
<a href="#">Menu 2</a>
</li>
<li>
<span id="menu3"></span>
<a href="#">Menu 3 </a>
</li>
</ul>

Example of want I want to archive:

I already have some CSS to make the menu horizontal.

Answer 1

li:hover{
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
  -moz-border-radius-bottomright: 0px;
  -moz-border-radius-bottomleft: 0px;
  -webkit-border-radius: 10px 10px 0px 0px;
  border-radius: 10px 10px 0px 0px;
  background-color: #000;
}

li{
  width: 50px;
  height: 50px;
  margin: 30px;
  float: left;
  padding: 10px;
}

li a{
  color: #0070C0;
  font-size: 14px;
  text-decoration: none;
}