Menú simple con CSS, bordes redondeados

Un menú simple con CSS con bordes redondeados, la estructura HTML la pegaremos junto a los estilos en un HTML/JavaScript, para aplicarlo donde aparece el símbolo numeral # indica la url de cada enlace que agreguemos, no tiene mayor complicación y es algo diferente a los menús planos que trae blogger por defecto.
Para implementarlo, copiamos y pegamos el siguiente código, hay que tener en cuenta que la mejor parte para situarlo es debajo de la cabecera del sitio, de esta manera lo cambiamos por el menú que trae blogger.

El resultado se vería de esta forma:

• Home
• enlace1
• enlace2
• enlace3
• enlace4

Totalmente personalizable ya que es solo con CSS.

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Enlaceo</a></li>
<li><a href="#">Enlacea</a></li>
<li><a href="#">Enlace</a></li>
<li><a href="#">Enlace</a></li>
</ul>
</nav>
<style type="text/css">
nav {
display: block;
width: 100%;
overflow: hidden;
}
nav ul {
margin: 80px 0 20px 0;
padding: .7em;
float: left;
list-style: none;
background: #444;
background: rgba(0,0,0,.2);
border-radius: .5em;
box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset;
}
nav li {
float:left;
color:#1667e1;
}
nav a {
float:left;
padding: .8em 1.5em;
text-decoration: none;
color: #555;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
font: bold 1.1em/1 'trebuchet MS', Arial, Helvetica;
letter-spacing: 1px;
text-transform: uppercase;
border-width: 1px;
border-style: solid;
border-color: #fff #ccc #999 #eee;
background: #c1c1c1;
background: linear-gradient(#ffffff, #aaaeb5);
}
nav a:hover, nav a:focus {
outline: 0;
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,.2);
background: #fac754;
background: linear-gradient(#4e8ff1, #87afec);
}
nav a:active {
box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;
}
nav li:first-child a {
border-left: 0;
border-radius: 8px 0 0 8px;
}
nav li:last-child a {
border-right: 0;
border-radius: 0 8px 8px 0;
}
</style>