How to add link dividers in a Navigation Bar with CSS

To add link dividers in a Navigation Bar, use the border-right property for the <li> element.


Live Demo

<!DOCTYPE html>
         ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
         li {
            float: left;
            border-right: 1px solid white;
         li a {
            display: block;
            padding: 8px;
            background-color: orange;
         li:last-child {
            border-right: none;
         <li><a href = "#home">Home</a></li>
         <li><a href = "#news">News</a></li>
         <li><a href = "#contact">Contact</a></li>
         <li><a href = "#about">About</a></li>

Updated on: 23-Jun-2020

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started