rounded corners on wordpress menu bar?

If I have a menu bar on my wordpress site that has a rectangle for each menu item, how can I round the corners of the bottom left and bottom right of the whole bar (without using images).
Note that the last 25% of the menu bar is empty.

header script for the menu bar:

<?php wp_nav_menu(array(
				    'container'       => '',
					'theme_location'  => 'header-menu')
					); 
				?>
                
            <?php if (has_nav_menu('sub-header-menu', 'responsive')) { ?>
	            <?php wp_nav_menu(array(
				    'container'       => '',
					'menu_class'      => 'sub-header-menu',
					'theme_location'  => 'sub-header-menu')
					); 
				?>
            <?php } ?>

Select allOpen in new window

and styles for that menu bar:

/* =Primary Menu
-------------------------------------------------------------- */
.menu {
	background-color:#585858;
	background-image:-webkit-gradient(linear, left top, left bottom, from(#585858), to(#3d3d3d));
	background-image:-webkit-linear-gradient(top, #585858, #3d3d3d);
	background-image:-moz-linear-gradient(top, #585858, #3d3d3d);
	background-image:-ms-linear-gradient(top, #585858, #3d3d3d);
	background-image:-o-linear-gradient(top, #585858, #3d3d3d);
	background-image:linear-gradient(top, #585858, #3d3d3d);
	clear:both;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#585858, endColorstr=#3d3d3d);
	margin:0 auto;
}

.menu, .menu ul {
	display:block;
	list-style-type:none;
	margin:0;
	padding:0;
}

.menu li {
	border:0;
	display:block;
	float:left;
	margin:0;
	padding:0;
	position:relative;
	z-index:5;
}

.menu li:hover {
	white-space:normal;
	z-index:10000;
}

.menu li li {
	float:none;
}

.menu ul {
	left:0;
	position:absolute;
	top:0;
	visibility:hidden;
	z-index:10;
}

.menu li:hover > ul {
	top:100%;
	visibility:visible;
}

.menu li li:hover > ul {
	left:100%;
	top:0;
}

.menu:after, .menu ul:after {
	clear:both;
	content:".";
	display:block;
	height:0;
	overflow:hidden;
	visibility:hidden;
}

.menu, .menu ul {
	min-height:0;
}

.menu ul {
	margin:-10px 0 0 -30px;
	padding:10px 30px 30px;
}

.menu ul ul {
	margin:-30px 0 0 -10px;
	padding:30px 30px 30px 10px;
}

.menu ul li a:hover, .menu li li a:hover {
	color:#484848;
	text-decoration:none;
}

.menu ul {
	min-width:15em;
	width:auto;
}

.menu a {
	border-left:1px solid #585858;
	color:#fff;
	display:block;
	font-size:13px;
	font-weight:700;
	height:45px;
	line-height:45px;
	margin:0;
	padding:0 0.9em;
	position:relative;
	text-decoration:none;
	text-shadow:0 1px 1px #242424;
}

.menu a:hover {
	background-color:#808080;
	background-image:-webkit-gradient(linear, left top, left bottom, from(#808080), to(#363636));
	background-image:-webkit-linear-gradient(top, #808080, #363636);
	background-image:-moz-linear-gradient(top, #808080, #363636);
	background-image:-ms-linear-gradient(top, #808080, #363636);
	background-image:-o-linear-gradient(top, #808080, #363636);
	background-image:linear-gradient(top, #808080, #363636);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#808080, endColorstr=#363636);
}

.menu .current_page_item a {
	background-color:#343434;
}

.menu li li {
	background:#fff;
	background-image:none;
	border:1px solid #b2b2b2;
	border-top:none;
	color:#444;
	filter:none;
	width:auto;
}

.menu li li a {
	background:transparent!important;
	border:none;
	color:#444;
	font-size:12px;
	font-weight:400;
	height:auto;
	height:20px;
	line-height:20px;
	padding:5px 10px;
	text-shadow:none;
	white-space:nowrap;
}

.menu li li a:hover {
	background:#f5f5f5 !important;
	background-image:none;
	border:none;
	color:#444;
	filter:none;
}

.menu ul > li + li {
	border-top:0;
}

.menu li li:hover > ul {
	left:100%;
	top:0;
}

.menu > li:first-child > a {
	border-left:none;
}

.menu > li:first-child > a, .menu li + li + li li:first-child > a {
}

/* =Primary Main Menu IE Fixes (Modernizr)
-------------------------------------------------------------- */
.ie7 .menu ul {
	background:url(images/ie7-fix.gif) repeat;
}

Select allOpen in new window