Html & CSS code for a navigation bar with a rounded corner

Written by sara williams
  • Share
  • Tweet
  • Share
  • Pin
  • Email
Html & CSS code for a navigation bar with a rounded corner
Make your navigation bar user-friendly by giving each link a "block" display type. (Jupiterimages/Brand X Pictures/Getty Images)

HTML provides the structure for data within Web pages. Following this principal, most Web developers create navigation bars starting with unordered lists. An unordered list creates a bullet list by default in all Web browsers, but you can use Cascading Style Sheets (CSS) code later to strip the bullets and style list items as necessary.

The Unordered List

Here is the code for a basic unordered list that will become a navigation bar:


<li><a href="somepage.html">Some Page</a></li>

<li><a href="anotherpage.html">Another Page</a></li>


Note that each item in the list -- created by the "<ul>" tag -- is wrapped in a list item or "<li>" tag pair. Since the website visitors need to click on items in the list, you must use the anchor tag to create links out of each list item.

Remove Default Styling

Before you can style an unordered list into a navigation bar, you must strip away default styles. If you use a reset style sheet, such as the one created by Eric Meyers, you can skip this step. Stripping away default styling requires setting the "list-style" property to "none" to remove bullets, and then you need to remove both the left margin and left padding. The CSS code looks like this:

ul {

list-style: none;

margin-left: 0;

padding-left: 0;


Make the List Horizontal

Although some websites use sidebar menus for navigation, the most common navigation bar orientation is horizontal, spanning across the top of the website. You can make your unordered list horizontal by setting list items to "float: left" like this:

li {

float: left;


Navigation Links

Giving each link a display type of "block" is the best way to make your navigation bar easy to use. Without "display: block", you cannot add padding to the links that add clickable space around their text. The padding also makes navigation bar item highlighting easier. This is an example of CSS code for links in a navigation bar:

li a {

display: block;

padding: 10px;

background-colour: #555555;

colour: #ffffff;

text-decoration: none;


li a:hover {

background-colour: #333333;


The previous code adds 10 pixels of padding around each link. The links get a background colour of medium grey and a text colour of white. "Text-decoration: none" turns off link underlining. The "li a:hover" selector's style rules make it so when the user hovers a mouse pointer over a link, its background becomes a darker grey.

Styling the Bar Itself

You can give your navigation bar any styling you want, with backgrounds, gradients, drop shadows and rounded corners. Make sure that your styling works in every browser, unless it is OK on the particular project to allow the bar to degrade gracefully. For example, here is the code for a bar with a black background and rounded corners:

ul {

background: #000000;

border-radius: 20px;


The "border-radius" property will not work in Internet Explorer 8 and below without the use of a polyfill such as "CSS3Pie." A separate style sheet wrapped in conditional comments, together with corner images, can create a fallback for the rounded corner as well.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.