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.
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.
Comments (45)
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.
example:
http://endlessx.com/rounded.html
# March 29, 2008 12:37 PM
Binny V A said:
IMO, using a background image is a much better way of creating rounded corners. Here's my implementation of rounded corners
# March 29, 2008 1:15 PM
Sashidhar Kokku said:
Good technique. However, is there any way I can avoid nested tags.
I am an ASP.NET developer. And hence most of my controls are rendered the way the .NET framework decides. Though I can override, its too much work.
So, is there anyway I can pull it off by not using nested tags?
Thanks in advance,
SK
# March 29, 2008 2:51 PM
CSS Guy said:
@Simon,
Nice one - looks like a pretty safe method. Works in IE6 and 7, too. This makes me wonder even more about the reasoning behind the folks at Google Analytics using three nested <b> tags.
# March 29, 2008 8:57 PM
Webstandard-Team said:
Why two b's? What's up with first-letter or first-line for a?
# March 31, 2008 1:44 AM
Rickibirder said:
Nice effect.
I've tried it as a feature div, as per your example page. Interestingly, in Firefox and Safari (haven't test IE yet) the contents of the box sit on top of adjacent suckerfish sub-menu items. I tried using Simon's technique (March 28) but any nested divs seem to create the same issue.
The div also flips out in IE, unless you put a width value to it and it seems to come good - so far.
# April 3, 2008 11:12 PM
Anonymous said:
What a great little trick!
Thanks
# April 3, 2008 11:32 PM
Barney said:
"This makes me wonder even more about the reasoning behind the folks at Google Analytics using three nested <b> tags."
Heehee. When did Google ever have a problem with generating a tonne of bloated deprecated markup to create universally unambiguous (to user agents, at least) layout? Take your DOM inspector to any Google widget and it's soup. They've always proved an authoritative case in point when arguing with standardistas — the case being for present browserland-unambiguous code as opposed to idealist W3 evangelism code.
Very good technique though. Thanks for running it past us!
@Sashidhar:
These don't need to be nested. To be extra safe it's best to put useless characters inside presentational tags (zero-width non-joiner [‌] always works for me), but they can just all be lumped at the end (which is what I always do — that way you can easily just cut them out without mucking with your real content) as long as the overral parent is set to {position:relative}.
# April 23, 2008 9:53 AM
Matt said:
Is there a way to accomplish this same effect without the extra tags by using border attributes? Wouldn't something like
:link {border-length: 99%;}
do the job?
(Of course there's probably no border-length property, is there?)
# April 23, 2008 12:22 PM
CSS Guy said:
@Matt,
Sure, there are other ways of achieving the same effect - background images, tables (eek!), whatever. I just hadn't seen this one before.
# April 23, 2008 12:55 PM
Andrew said:
Nice one! It seems to be pretty rare I come across a method of doing something in CSS that I hadn't already seen, and this one fits the bill nicely.
@Simon
Nicely done! The more we can stay away from deprecated tags the better imho.
# April 24, 2008 10:34 AM
Stewart Schatz said:
@CSSGuy,
Thanks for sharing!
@Simon
Way to take it a step further. I really like your method!
# May 1, 2008 10:11 AM
Arthur Lawry said:
*** I just noticed Simon's post with a similar solution using negative padding. This one uses absolute positioning so I'll post it as well ***
The example below is for 200-pixel wide options and includes a :hover effect:
<ul>
<li><a href="/"><span>Option 1</span></a></li>
<li><a href="/"><span>Option 2</span></a></li>
<li><a href="/"><span>Option 3</span></a></li>
<li><a href="/"><span>Option 4</span></a></li>
</ul>
ul {
width: 198px;
margin: 0;
padding: 0; }
ul li {
list-style: none;
height: 26px;
padding: 0;
margin: 0 0 2px 0; }
ul li a {
position: relative;
display: block;
background-color: #E4E4E4;
border-bottom: 1px solid #D7D7D7;
border-top: 1px solid #D7D7D7;
text-decoration: none;
color: #000;
height: 24px; }
ul li a span{
position: absolute;
display: block;
top: 0px;
left: -1px;
border-left: 1px solid #D7D7D7;
border-right: 1px solid #D7D7D7;
text-indent: 24px;
height: 24px;
line-height: 24px;
width: 198px;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif; }
ul li a:hover {
background-color: #FFEAE0;
border-bottom: 1px solid #FFD3B4;
border-top: 1px solid #FFD3B4; }
ul li a:hover span{
border-left: 1px solid #FFD3B4;
border-right: 1px solid #FFD3B4; }
# May 2, 2008 8:23 AM
Kas said:
>The example below is for 200-pixel wide options and includes a :hover effect:
its no good. no work in IE6...
# May 4, 2008 5:56 AM
Michal Čaplygin said:
Nice.
I've made a simple test case using two nested elements and negative margin, as proposed in the first comment. 'Core' came up like this (ems used just for fun):
I am quite surprised how simple it is : )
# May 4, 2008 8:11 AM
Derive Host said:
Many Thanks for Sharing.
Best Regards
Team
Web Hosting Sri Lanka
# May 5, 2008 12:53 AM
Saboravallarta said:
Hi from puerto vallarta jalisco mexico, please visit: www.saboravallarta.com.mx News Radio & Television Online
thanks !!!
# May 5, 2008 12:08 PM
f-bomb said:
Nice tutorial, but this is highly impractical. I can't see any benefit for using so much CSS to replace a small image. Why waste the time only to be challenged with cross-browser compatibility?
# May 6, 2008 6:55 AM
Ryan said:
Nice article - I am re-coding my website and will use this method. I have not seen this before - Thumbs Up!
rg
# May 7, 2008 1:00 AM
Neil said:
To be honest, i have analytics installed on my site but they are always giving me the wrong info ;( Not a fan anymore
# May 9, 2008 2:22 PM
Francisco Aquino said:
I wrote this and noticed someone used the same idea, but will post it anyway since it uses the simplest HTML structure and complete cross-browserness we all love.
ul { padding: 0; }
a, li
{
height: 25px;
line-height: 25px;
width: 240px;
border: solid 1px #aaa;
}
li
{
list-style: none;
border-top: 0;
border-bottom: 0;
margin: 0 0 4px 0;
background: #eee;
position: relative;
}
a
{
position: absolute;
top: -1px;
border-left: 0;
border-right: 0;
width: 100%;
}
# May 14, 2008 9:17 PM
T-Shirt Girl said:
wow thanks for this great "trick", but I wonder if the work is really worth it instead of just using a bg-image...
Léonie.
# May 16, 2008 3:22 PM
Anti said:
I'm sorry, but this is terrible. I'm not a standards zealot, but seeing atrocious markup like this being rah-rah'd makes them look pretty sane.
Think about it people, you're using two dozen lines and utterly non-semantic markup to achieve a presentational effect that is *already available in most browsers with a single line of CSS*.
Just use border-radius: 1px and let the UAs that don't understand it (which includes IE and only IE) ignore it and get flat borders.
# May 17, 2008 8:19 PM
Squirrel said:
Anti - border-radius is a cool idea, but for those of us who code in the real world we can't use CSS3 standards, we have to code for crap like IE 6 because 90% of companies still use it unfortunately.
# May 21, 2008 7:44 PM
JT... said:
Nice code from @Simon there...
Although I did change the span to a b tag. I'm kooky like that.
# May 23, 2008 1:00 AM
Colin Miller - Freelance web designer said:
Nice technique, I like it! subtle.
Oh by the way you might not be aware but you are getting an error on this page...
Error: jQuery is not defined
Source File: http://quarterlife.com/commons/javascript/dimensions.js
Line: 1
# May 30, 2008 12:54 PM
Joost vd Wal said:
I try to avoid nesting empty tags if possible.
Thanks Simon, for the example with negative margins.
I've modified it to drop the empty tags.. tradeoff being no IE6 border highlight on hover. For lack of a better defense, lets call that graceful degradation ;)
Links will be simple li a's
# June 6, 2008 3:52 AM
Joost vd Wal said:
Same thing, but with variable widths and possibility to float (if you want buttons)
# June 6, 2008 5:01 AM
Jesper Rønn-Jensen said:
The B-tag mod was also done by Erik Meyer and Tantek when designing Technorati.
Tantek explains in the comments about the considerations on my blog in this article:
Rounded Corners the Technorati Way (Feb 2007)
BTW, i did a small JQuery script that adds the round corners automatically -- just add a css class="round"
JQuery Rounded Corners (Technorati Style) (May 2008)
# June 16, 2008 9:06 AM
Control Panel said:
I would like to know how to round corners as in google ads. Can you please let me know?
# June 21, 2008 1:59 AM
Kevin Jansz said:
The third level b is for padding. The -1 is putting it in the center again.
Setting a padding at any of the other levels would push the borders out.
# June 24, 2008 3:06 AM
Masim man said:
Hi guys, thanks for sharing...
I like to learn something that I don't know before, just like this one. I will try this nice tip and also the other commenter tips as well. Another method of rounded corner I have done with my blog theme, simple and resizable.
But I would like to know how it looks like in other browser, I only tested it in new version of Opera, Safari, IE, and Firefox.
Again, thanks to you all.
# June 24, 2008 3:44 PM
Greg Millard said:
You are soooo stupid!
Just use background images!
Or better yet, Mozilla Firefox's -moz-border-radius:5px; which is anti-aliased, and is what all the smart web designers use.
# June 27, 2008 2:11 AM
Web Design Forum said:
I've seen the 1px less each line method used on sites, and have used it myself and it works ok. If you make each line on the top of your menu a different shade of the colour you've chosen, you get quite a good smooth tube effect.
# July 4, 2008 5:47 PM
dora said:
Thanks for the tutorial. Here is the easiest way to generate round corner: http://www.roundz.net
# September 27, 2008 9:18 AM
Chow said:
The simple reason to nest one more B, is that you can use the B alone just for ...aham... BOLD. If you put a little dot on the first B, you loose the B's main functionality.
# October 1, 2008 12:31 AM
Tim Sheiner said:
For purely notched corners, this technique can be simplified further. Just use a single 'b' object with both a top and bottom border. Adjust the height and width of that object to create the appropriate 'extra' borders.
# December 2, 2008 5:32 PM
Jack Motal said:
interesting use of css that google uses
# January 9, 2009 3:55 PM
Rik Weber said:
Nice trick, though a little long winded way of doing it by Google.
To be honest I'm not a major fan of these kind of methods as they go against the whole idea of separating code and design.
Still stuck in my old ways of background images I guess :)
# February 2, 2009 3:10 PM
Emil said:
Hi,
I've downloaded your roundBox I would say like month ago, however I think that something is going wrong. Where can I get the instructions or sample please.
Thanks,
Emil
# March 11, 2009 3:59 PM
Nils Hendriks said:
@ Greg Millard
What a dumb comment.
'border-radius' is part of CSS Backgrounds and Borders Module Level 3 which is still a working draft. So it will not validate when you use either -moz-border-radius or webkits version.
I think this is the very reason "all smart" web developers stay away from it for now.
If you comment, say something useful or just don't and prevent yourself from coming across as a jerk and dumb @ss.
# March 16, 2009 7:39 PM
Saboravallarta said:
Bienvenido a mi sitio de enlace los invito a visitar www.saboravallarta.com.mx Noticias Radio y Television Online desde Puerto Vallarta Jalisco Mexico, Transmitimos Musica, Entrevistas, Reportajes, Eventos Deportivos Mundiales, Nacionales, y Locales, visitanos y disfruta de nuestra programacion !!
Saludos !!
# March 27, 2009 4:29 PM
System admin and web design said:
Very nice! I was having trouble making my dom "buttons" lokk the same in IE and FF. This works and looks good!
# May 1, 2009 10:51 AM
Janice Ann said:
Well, how about http://theboxes.paradise.sg ? Seems neat. Way too easy.
# July 10, 2009 2:38 AM
Saboravallarta said:
Saboravallarta
Bienvenido a mi sitio de enlace los invito a visitar: http://www.saboravallarta.com.mx Noticias Radio y Television Online desde Puerto Vallarta Jalisco Mexico, Transmitimos Musica, Entrevistas, Reportajes, Eventos Deportivos Mundiales, Nacionales, y Locales, visitanos y disfruta de nuestra programacion !!
Saludos !!
# August 9, 2009 9:31 PM