Borders

A pipe character, |, is often used to differentiate between choices. It is an obvious separating character, and can be emulated by adding borders to list items:

#pipe ul {
 margin-left: 0;
 padding-left: 0;
 display: inline;
 }

#pipe ul li {
 margin-left: 0;
 padding: 3px 15px;
 border-left: 1px solid #000;
 list-style: none;
 display: inline;
 }
 
  
#pipe ul li.first {
 margin-left: 0;
 border-left: none;
 list-style: none;
 display: inline;
 }

Here we add class="first" to the first LI so that it does not end up with a border on its left side.