Bottom border on li element

Question

I am trying to add a bottom border to my li elements. For some reason, no bottom border is added. I can add a border to the right and left, but not the bottom. What am I doing wrong?

 .menu { text-align: right; }.menu li { padding: 5px; text-transform: uppercase; display: inline; list-style-type: none; list-style-position: inside; border-bottom: 1px solid red; }

 <div class="menu"> <ul> <li>Home</li> <li>Home</li> <li>Home</li> <li>Home</li> <li>Testimonials</li> <li>About Us</li> <li>Contact Us</li> </ul> </div>

Answer 1

try adding;

html, body{
  margin: 0;
  padding: 0;
}

Your code is working fine here without any changes.

Answer 2

This is better:

*{
   margin:0;
   border:0;
}

Answer 3

I understand clearly about your need. the solutions is given below just change bottom as right. please test and give feedback.

.menu li{    
    padding:5px;
    text-transform: uppercase;
    display:inline;
    list-style-type:none;
    list-style-position: inside;
    border-right: 1px solid red;
}