Hi I'm creating a simple portfolio mobile template. The template only for educational purpose and to help increase my ideal knowledge in CSS and HTML5. I would love to provide a picture but since I'm always on the go I'm currently writing this through my iPad and they're is no way to provide one. Anyways I have this <HTML> element and inside I have the CSS all together. (Just in case yes I know about style sheet but for this specific project I want it all to be together but don't worry I'll separate it for you.)

What I'm trying to achieve is a navigation of 3 sections. I want them to look better. I have created the base if what it should look like. How can I perfect them? Or is there something I did wrong or should fix? Also if your insisting on animation I'd love to hear your though however I stayed away from animation for this nav.

Here the CSS

Code:
body{
				margin:0;
			}
			#wrapper{
			    width:314px;
                            height:600px;
                            border:5px solid black;
			}
			.nav{
			    border:5px solid purple;
                            height:50px;
			}
			.nav ul{
                            height:40px;
                            border:5px solid green;
                            margin:0;
			}
			.nav li{
			    display:inline;
                            border-left:1px solid red;
                            border-right:1px solid red;
                            border-bottom:1px solid red;
                            border-bottom-left-radius:10px;
                            border-bottom-right-radius:5px;
                            padding:0px 7px 10px 7px;
			}
			.nav li a{
			    text-decoration:none;
                            color:blue;
			}
Here the HTMl code just in case
Code:
<!DOCTYPE html>
<html>	
	<head>
              <meta charset="utf-8">
              <title></title>
              <link type="text/css" rel="stylesheet">
        </head>
    <body>
        <div id="wrapper">
            <nav class="nav">
                <ul>
                    <li><a href="">Home</a></li>
                    <li><a href="">Portfolio</a></li>
                    <li><a href="">Contact</a></li>
                </ul>
            </nav>
		</div>	
	</body>
</html>

My main concern is the CSS not the actual markup. Any help is appreciated, thanks.
-Jonathan V.