Css Borders Not Appearing

I'm attempting to style my navigation menu design to reflect the one on timeanddate.com, as seen in this image: To create the colors, they're using a simple bottom and left borde

Solution 1:

Although you set the width and color, you can not leave out the style parameter with borders.

To get the desired effect as you presented in the image - jsFiddle demo

• dark background color for the <ul>
• a wide border-left on the <li>
• a margin-bottom: 2px as bottom border - shows ul background
• and a few small tweaks like text-indent etc

---

Some information regarding borders

CSS borders consist of 3 parameters

• border-width
• border-style
• border-color

You can set one value, which applies to all sides

border-width: 5px;
border-style: solid;
border-color: red;

Or with short hand border: 5px solid red; and also applies to all sides.

---

You can style each border side individually, as you are doing above.

• border-side-width
• border-side-style
• border-side-color

Example:

border-left-width: 5px;
border-left-style: solid; 
border-left-color: white; 

Which can be accomplished also with shorthand: border-left: 5px solid white;

---

For more information and other border opportunities

• https://developer.mozilla.org/en-US/docs/Web/CSS/border
• https://developer.mozilla.org/en-US/docs/Web/CSS/border-style

Solution 2:

ahhh... Brian you beat me to it. I inserted border-style, and then there is "BORDER"

border: 5px solid white;

Solution 3:

Actually the trick in his case is that border is applied to the anchor tags not the lists! Cheers! :) And yes if you apply border-color as a property you should also apply border-style and border-width :)