Skip to content Skip to sidebar Skip to footer

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

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 :)

Post a Comment for "Css Borders Not Appearing"