RE: rendering of border edges

Hey Sylvain,

I can't use the testpage in the image on my blog (the site is still a work in progress and I can't just release the design).
However! Did make a single test page that shows a live example and a composite image of the rendering in all (important) other browsers:
 FF3.6, Safari 4, Chrome 5, Opera 10.5, IE9 PP2, IE8. IE7 and IE6 behave the same as IE8.

All screenshots taken on a windows PC, Mac rendering has been known to vary in this particular case (fe, Chrome still shows jaggy edges on Mac here).
IE9 PP2 renders it fine, kudos to Microsoft!

Check the page on:
http://onderhond.com/testpages/triangles.html

Greets,
Niels Matthijs
http://www.onderhond.com

From: Sylvain Galineau [mailto:sylvaing@microsoft.com]
Sent: 02 June 2010 10:13 PM
To: Niels Matthijs; www-style list
Subject: RE: rendering of border edges

Would you be able to share a link to the page you used for the screenshots at the end of the post ? Thanks !

From: www-style-request@w3.org [mailto:www-style-request@w3.org] On Behalf Of Niels Matthijs
Sent: Wednesday, June 02, 2010 4:28 AM
To: www-style list
Subject: rendering of border edges

Hi all,

Just an interesting thing I noticed, but Firefox 3.6 (and apparently Chrome for Windows) make sure the line created by two differently-colored neighbouring borders is anti-aliased. This ensures a nice visual result.

Hit this when I was trying the css triangle technique using triangles which didn't have the regular 90/45/45 degree layout. When straying from this layout, you end up with ugly jaggy edges in most browsers.

Article and a pic of the result in FF vs the rest can be found:
http://www..onderhond.com/blog/work/css-triangles-issues<http://www.onderhond.com/blog/work/css-triangles-issues>

Maybe something to mention in the border rendering standards?

Greets,
Niels Matthijs
http://www.onderhond.com