border model/the four dots issue

April 02, 2008 / 11:58

back to overview

When talking about css, it's hard not to talk about cross-browser issues. Battling these cross-browser issues is an important part of our daily job, but it's hard to explain to people how deeply rooted these issues can be. Before the end of last year I gave you a little present in the form of an article about cross-browser underlining inconsistencies. You can consider this article my belated Eastern present.

This article will not only demonstrate the problems we're facing in our everyday work using a very simple and easy to understand example, it's also a plea to go easy on browser developers from time to time. They only have the specs to work with, and these specs aren't always as complete as one might hope. So today, let's talk borders.

the border model cross-browser

Borders aren't hard to draw. Their position and behavior is pretty well defined in the box model, and in most cases the visualization of a border won't give you any visual inconsistencies.

the problem

So imagine you're a browser vendor and you need to implement those borders everyone wants. You draw four 1px lines and all is well. Now people want borders that are 3px thick. No problem you say, our implementation can handle that. But of course, people want more. Apparently they want to declare the color for each border separately. You sigh and go to work again. As for the corners, you create a virtual diagonal line to keep each border separated.

And then you decrease your border width to 1px again. You're now left with corners that are 1px large, for which you can't create any diagonals. You have to apply a color to the corners but what color will you give them? The w3c isn't much help and people are begging for their borders.

the reality

This example won't be too common in reality but as a browser vendor you have to make sure at least something happens. And of course I realize it's a drag to make a decision without any firm guidelines. On the other hand, it is noteworthy that each browser family has implemented another solution to this problem, which doesn't make our job any easier.

To see what each browser is doing, you can take a look at the image above. The only similarity between all four browser families is the bottom right corner, all the others differ depending on the browser.

opinions

It hard to define a good solution for this problem, as this probably depends on the situation you want to use it in. Still, there's little logic to be found in the implementations above. My guess is they simply followed the order of drawing as it was already present. Maybe you could argue they should have used a widely known convention (like clockwise), though in the end this wouldn't be based on any solid logic either.

As for myself, I would use the Safari way, but reversed. Let the top and bottom border take preference over the left and right border. The only reason I can give you is experience. This implementation would've benefited me in the few times I encountered this problem. But I'm sure other people out there have other experiences, so this doesn't account for much either.

and so we conclude again ...

Getting things to work cross-browser can be a total drag. But it's not always the fault of browser vendors either. And hey, at least it keeps our job challenging. At least I hope this is useful the next time you need explaining why you spend so much time on browser issues.

Article info

contact me

If you want to send me a quick message or you have any questions, don't hold back.

the archive

All my articles are neatly filed inside the archive. Search and filter your way to the articles you want:

Comment author

6 comments in total

Chris #1 April 08, 2008 18:26

I agree with you. "use the Safari way, but reversed"

foo #2 April 09, 2008 01:07

I think the fact that no-one has written about this until now means that it's not been an issue

John Faulds #3 April 09, 2008 01:59

Actually foo I've read a very similar article to this before (just can't find the link now), so at least someone else has considered it.

Niels Matthijs #4 April 09, 2008 10:43

It's not as much a real "issue" as it is a good indication of the problems we as front-end designers are facing. Same goes for browser vendors. That said, there have been a few situations where the border model caused me some (very minor) visual glitches.

And indeed, this information isn't exactly new, there have been articles about this in the past. Still, not many people know about it so I figured it would be a good reminder (plus it tied in nicely with an older article about cross-browser issues).

bar #5 April 21, 2008 21:21

Oh the horrors, four pixel difference! I'm sorry, but this is ridiculous.

Let your inner control freak go and accept that HTML is not a pixel-exact medium.

Niels Matthijs #6 April 22, 2008 09:41

Well, I can only urge you to read the article again, carefully. I think I've explained my reasons enough by now.

accept that HTML is not a pixel-exact medium.

Actually, apart from a couple of minor issues, it is a pix-perfect medium.

* required fields

Leave your data
Leave a comment