Rounded Corner with Images - Create a Nav Bar

This is another example of round-corner in CSS, but this one requires images. The figure 1 is a screenshot of the actual horizontal nav bar I created a while ago.

Figure 1.

For this nav bar, I created 4 images - Top-left and top-right for the nav bar, and top-left and top-right corner for tabs. All images are created in 4 pixel by 4 pixel dimension. The figure 2 show the top-left of nav bar, and top-left of tabs.

Figure 2.

The nav_tl.gif (nav) has orange round corners, while tab_tl.gif (tab) has orange background with transparent corners, because I wanted to create a "selected" tab and mouse-over color-change effect only with CSS color change, without using extra images.

The code below is the HTML part of the nav bar. I assign the background-image to <a> tag for top-left corner gif, and I gave nonsense tag, <span> to apply the top-right corner gif as background image.

HTML (Navbar using unordered lists)

<div id="navBar">
 <ul>
  <li><a href="#" class="selected"><span>Home</span></a></li>
  <li><a href="#"><span>Blog</span></a></li>
  <li><a href="#"><span>Extras</span></a></li>
 </ul>
</div>

Tabs with Round-Corners

/* Top-left corner */
#navBar a { 
 background: url("images/tab_tl.gif") no-repeat top left;  
}
/* Top-right corner */
#navBar a span { 
 background: url("images/tab_tr.gif") right top no-repeat;
}
/* Hover-state ("Blog" tab in Figure 1) */
#navBar a:hover {
 background-color: #F9CA66; 
}
/* Selected Tab ("Home" tab in Figure 1) */
#navBar a.selected, #navBar a.selected:hover {
 color: #750;
 background-color: #fff;
}

The entire CSS for the nav bar looks like this:

CSS (All)

 #navBar {
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  font-size: 18px;
  width: 270px; 
  color: #fff;
  background: #e0a528 url("images/nav_tl.gif") no-repeat top left; 
  position: relative;
 }
 #navBar ul {
  white-space: nowrap;
  padding: 10px 15px 0;
  margin: 0;
  background: url("images/nav_tr.gif") no-repeat top right;  
  overflow: hidden;
 }
 #navBar li {
  display: inline; 
  list-style-type: none; 
 }
 #navBar a { 
  color: #fff;
  text-decoration: none;
  padding-left: 10px;
  margin: 0 3px;
  background: url("images/tab_tl.gif") no-repeat top left;  
 }
 #navBar a span { 
  background: url("images/tab_tr.gif") right top no-repeat;
  padding-right: 10px;
 }
 
 #navBar a:hover {
  background-color: #F9CA66; 
 }
 #navBar a.selected, #navBar a.selected:hover {
  color: #750;
  background-color: #fff;
 }