Removing Last Border in a Menu With CSS

You will often see a menu that looks like this:

About | Services | Our Team | Contact

But if you want to use the CSS “border-right” to make that pipe after each menu item, how do you get rid of the pipe for the last menu item? Easy!

First, my CSS for my menu border looks like this:

#menu-main-menu li {
	border-right: 1px solid #666;
	padding: 0 7px;
}

Then, I’ll use the CSS selector “last-child” to target the last item like this:

#menu-main-menu li:last-child {
	border-right: none;
}

Viola! Last border pipe removed!