One pixel notched corners as used by Google Analytics

I use Google Analytics, and I noticed that their left nav has an interesting characteristic: instead of each option being boxed in a clickable rectangle, there is a one pixel notch in each corner. It’s not necessarily a curved corner, but it is a little softer than a normal box.

Google Analytics Nav uses has a one pixel notch in each corner.

I would’ve naturally thought that if someone is going to use background images to create a capsule effect, they would have used anti-aliased images. But upon closer inspection, no background images were used at all. Instead, a couple of nested tags within the link help create the effect. Instead of this:

<ul>
  <li>
    <a href="/">
      Visitors
    </a>
  </li>
</ul>

Some <b> tags are added (likely chosen because because of their length – one letter):

<ul>
  <li>
    <a href="/">
      <b>
        <b>
          <b> 
            Visitors
          </b>
        </b>
      </b> 
    </a>
  </li>
</ul>

Now whether or not this is the purest thing to do is not the subject of this article. Obviously, I don’t support overnesting of tags. But the Analytics designers did this for a specific design purpose. Nesting one tag is quite common for achieving sliding-doors rounded tabs. Perhaps the reasoning was, ‘Why not nest two more and drop the use of images?’

Also, similar techniques exist out there to get rounded borders with a greater radius than just one pixel. However, those techniques involve much more extra markup (or javascript to create it for them) in the form of empty tags, where success comes in the form of a pixelated curve reminiscent of an 8-bit Nintendo display. (I exaggerate, but still.) In the case of a one pixel notch, the effect at least looks intentional.

The notched corner is created by modifying the nested tags’ border and position properties.

Here’s the CSS:

li a {
  display:block; /* a must */ 
  border: solid #666;
  border-width: 0 1px; /* left and right borders only */ 
  text-decoration: none;
  outline:none; /* so as not to distract from the effect */ 
  color: #000;
  background: #e4e4e4;
}
li a b {
  display: block; /* another must */ 
  position:relative; /* because the child elements are positioned */ 
  top: -1px; /* drag it up a little, creates the top notches */ 
  left: 0;
  border:solid #666;
  border-width:1px 0 0; /* top border only */ 
  font-weight:normal;
}
li a b b {
  border-width:0 0 1px; /* bottom border only */ 
  top: 2px; /* pushed down a little to create the bottom notches */ 
}
li a b b b { /* i don't think three-deep tag is even necessary */ 
  top:-1px;
  padding: 1px 6px;
  border-width: 0;
}

To just get the notch, the third-deep <b> tag isn’t needed. I think Google Analytics included it because they wanted to add some background images with it on their buttons. I think this effect can be achieved with one less nested <b>.

<ul>
  <li>
    <a href="/">
      <b>
        <b> 
          Visitors
        </b>
      </b> 
    </a>
  </li>
</ul>

In my example page, I left it at two deep.


This post was ported from an old host and CMS, so many comments were lost. Below are the comments that I found were most helpful regarding this post that I salvaged. Some links or attributions may not be working correctly.


Simon Käser said:
Nice technique there. But I don’t see the need for more than one nested tag. One nested span tag is enough if you use negative margins rather than top and bottom.