You can use :first-child and :last-child to target the first and last list items but if you want older browsers support then add a class to the first and last list items instead.
You will also need the border radius and background colour on the anchor.
Here’s a working demo:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
nav {
margin-top: -15px;
box-shadow: 10px 10px 5px grey;
width: 754px;
border-radius: 25px;
}
nav ul {
height: 50px;
padding: 0;
margin: 0;
list-style:none;
border-radius: 25px;
}
nav ul li {
list-style-type: none;
width: 150px;
float: left;
border-right: 1px solid #CCC;
text-align: center;
}
nav ul li:last-child{border:none}
nav ul li a {
text-decoration: none;
color: white;
line-height: 50px;
display: block;
background-color: black;
}
nav ul li:first-child a{border-radius: 25px 0 0 25px}
nav ul li:last-child a{border-radius:0 25px 25px 0}
nav ul li a:hover {
background-color: red;
color: orange;
}
#company ul li {
text-align: right;
color: green;
line-height: 1.2;
list-style-type: none;
background-color:;
margin-right: 2px;
margin-top: 0px;
}
#company ul li a {
text-decoration: none;
}
</style>
</head>
<body>
<div id="company">
<ul>
<li>Website: <a href="#">WWW.WHATEVER.COM</a></li>
<li>Telephone #: 1-800-867-5309</li>
<li>Email: whatever@gmail.com</li>
<li>Business Hours: Monday-Friday 8:00am-5:00pm</li>
</ul>
</div>
<nav>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">PRODUCTS</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">CONTACT US</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</nav>
<p id="sup">border radius allows you to add rounded corners</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
nav {
margin-top: -15px;
box-shadow: 10px 10px 5px grey;
width: 755px;
border-radius: 25px;
}
nav ul{
background-color: black;
height: 50px;
padding: 0;
margin: 0;
border-radius: 25px;
}
nav ul li {
list-style-type: none;
width: 150px;
float: left;
border-right: 1px solid #CCC;
text-align: center;
}
nav ul li:last-child {
border-right: none;
}
nav ul li:last-child a {
border-radius: 0 25px 25px 0;
}
nav ul li:first-child a {
border-radius: 25px 0 0 25px;
}
nav ul li a {
text-decoration: none;
color: white;
line-height: 50px;
display: block;
}
nav ul li a:hover {
background-color: red;
color: orange;
}
#company ul li {
text-align: right;
color: green;
line-height: 1.2;
list-style-type: none;
background-color: ;
margin-right: 2px;
margin-top: 0px;
}
#company ul li a {
text-decoration: none;
}
</style>
</head>
<body>
<div id="company">
<ul>
<li>Website: <a href="#">WWW.WHATEVER.COM</a></li>
<li>Telephone #: 1-800-867-5309</li>
<li>Email: whatever@gmail.com</li>
<li>Business Hours: Monday-Friday 8:00am-5:00pm</li>
</ul>
</div>
<nav>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">PRODUCTS</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">CONTACT US</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</nav>
<p id="sup">border radius allows you to add rounded corners</p>
</body>
</html>
The effect isn’t perfect, though. It would be better to put the border radius on the links themselves and not have it on the UL, but then you’d have to lose the shadow effect.
EDIT: haha, pipped by Paul. That’s my punishment for checking on dinner half way through answering a post.
Ideally, the code you post should be a “working page” (starts with doctype, ends with </html>) that demonstrates the probem. That way, you can be assured that we will see exactly what you see. For additional information about reporting problems or posting code, please click the link in the footer of my post and read our guidelines. Thanks.
You have omitted a few tags from your code. Granted, HTML allows some to be omitted, but the doctype is not one of them and good practice begs consistency. Notice Paul’s and Ralph’s examples. You can copy them to a file and the will perform perfectly in any browser. As posted above, your code will not.
