Добавяне на закръглени ъгли в навигационна лента CSS - html, css

Имам един бар на сайта си, но искам да закръглим ъглите на всеки край. Досега ми css за това е ..

#nav {
left:40px;
position:relative;
top:140px;
}
#nav a {
background-image:url(../images/menu.png);
background-repeat:no-repeat;
color:#FFFFFF;
display:inline;
float:left;
font-family:Arial,Helvetica,sans-serif;
font-size:17px;
font-weight:bolder;
height:44px;
padding-top:12px;
text-align:center;
text-decoration:none;
width:134px;
}
#nav a:hover {
background-image:url(../images/menu_ro.png);
background-repeat:no-repeat;
}

и моя HTML ..

<div id="nav">
<a href="">Home</a>
<a href="">Food</a>
<a href=""</a>
<a href=""</a>
<a href=""</a>
<a href=""></a>
<a href=""</a>
</div>

Имам закръглени ъгли, за да се справям с всеки крайmenu_l.png и menu_r.png. Не мога да разбера как да ги слагам в двата края на кораба.Моите опити досега изглежда се пренебрегват от браузърите.Всеки има най-добрия начин да постигне това?

Наздраве

Отговори:

1 за отговор № 1

Опитайте се да добавите a div в началото на #nav, и в края.

<div id="nav">
<div id="nav-left"></div>
//anchor tags
<div id="nav-right"></div>
</div>

след това направете това за CSS: (ако приемем, че вашият заоблен ъгъл е 15px широк)

#nav {
padding: 0 15px;
}
#nav-left, #nav-right {
float: left;
height: 15px;
width: 15px;
}

След това приложете закръгленото ъглово изображение.

---

0 за отговор № 2

Лесният начин да направите това в някои модерни браузъри е да добавите нещо като:

-moz-border-radius: 8px; -webkit-border-radius: 8px;

който ще работи с браузъри, базирани на мозъци и сафари (уебкарти).

Уви, IE е по-сложно.

---

0 за отговор № 3

Можете да зададете левия фон на първата връзка и десния фон на елемента #nav.

Можете също да зададете лявото bg на #nav и правото на #nav като използвате селектора на съдържанието ::after.

---