Fix that Border

Normal usage of CSS border is what we all know, like border: solid 1px black;. Sometimes we use border to create some nice cool stuff. Here is an example which creates an up arrow:

.arrow {
    content: "";
    width: 0;
    height: 0;
    border: solid 8px transparent;
    border-bottom: solid 8px black;
}

This trick is very useful when applying it to an container's(e.g. a tooltip) :after pseudo element(setting its position to absolute and giving it proper top | left value). Definitely you will notice how the arrow was shaped.

Here is another common usage of border. Giving a nav, how will you make the sub links of the nav list look more like tabs? There is one simple way to achieve that goal, assuming it's a vertical list, and the construct is like ul.nav > li > a:

.nav li a {
    border: solid 1px #eee;
    border-left: solid 5px #ccc;
    background: #aaa;
}

Something like that, quick and easy, and the effect is not bad. But there is one problem. Check out a snapshot from http://preview.python.org/

new(preview) python site

There are three effects using the borders:

  1. the arrow in the center
  2. the tab thing
  3. a lighter blue right border and a darker blue left border give you a 3d effect

Have you noticed the problem marked in red circle? Right, the corner is broken. It feels very annoying when you just standing there and watching it. Well, if you want the arrow, then this is natural.

Actually it's easy to fix. But people tend to ingore that. One solution I came up with is to split the border-top and border-left | border-right into different level of layers(e.g. One is set on li, and the other is on a). You can also use pseudo element to generate the top border effect.