CSS Borders Not Displaying

Question

I am trying to create my own navigation menu design to reflect it on timeanddate.com, as shown in this image:

To create colors, they use a simple bottom and left border in CSS.

I am trying to add a border to the <li> in the sandbox of my site, http://www.escapetech.com:8080 .

I use the following CSS:

 .anylinkcss li { list-style-type: none; } .participate li { list-style-type: square; border-left-color: #fa514d; } #navigation_bar { height: 31px; list-style: none; width: 1000px; margin-top: 15px; } #navigation_bar li { float: left; padding-right: 35px; padding-left: 10px; margin: auto 0px; vertical-align: middle; } #anylinkmenu3, #anylinkmenu4, #anylinkmenu5, #anylinkmenu6, #anylinkmenu7 { position: absolute; line-height: 18px; z-index: 20; background-color: #000; text-align:left; visibility: hidden; left: 421px; top:207px; padding: 7px; padding-left: 25px; } 

#anylinkcss3 and further we present styles for the drop-down lists, and #navigation_bar styles - for the whole bar. No matter where I add border styles, none appear even after I comment out all the CSS code and just include the border of these identifiers and classes.

My current live menu via the link that I posted above, I would really appreciate if someone could take a look and tell me why there might be problems with the appearance of borders. This is my first Stack Exchange entry, so I hope it was formatted correctly!

Answer 1

Although you set the width and color, you cannot leave the style parameter with borders.

To get the desired effect shown in the image - jsFiddle demo

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

---

Some Boundary Information

CSS borders consist of 3 parameters

• width border
• border style
• color borders

You can set one value that applies to all parties

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

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

---

You can stylize each boundary side separately, as you do above.

• border on the width side
• style border
• side border

Example:

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

What can also be done with the abbreviation: border-left: 5px solid white;

---

For more information and other features of the border area

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

Answer 2

ahhh ... Brain you beat me. I inserted the border style and then "BORDER"

 border: 5px solid white; 

Answer 3

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