You’ve probably used CSS’s border property often, and in almost all cases you’ve probably set the border-style value to “solid”, which looks exactly the same in every browser.
We all know there are other values for border-style, but it’s likely you’ve never used any of them. You may have used a value of “dashed” or “dotted”, but probably not too often.
I thought it would be interesting to screen capture how all the different browsers display all the different values for border-style. In addition to the screen shots, I’ve provided some observations and I’ve summarized how the different values are supposed to look (according to the specification). All screen shots are taken on a Windows 7 machine.
The Code Used
I’m using two different code blocks with the various border-style properties. The first three screen shots are using the following, with the others changing only the border color and, of course, the border style:
.box {
width: 50px;
height: 50px;
border-width: 5px;
border-color: #444; /* changes to "pink" for the rest */
border-style: dotted; /* dashed, double, groove, ridge, inset, outset */
}
The change in border color for the other values helps them to be more visible.
Due to the different ways that some browsers render the box model (guess who?), there are some minor differences in the sizes of a few of the boxes, but I’m not discussing those issues here.
Value: dotted
Observations:
Some look like diamonds, others like circles. Firefox, Chrome and Safari have stronger corners. IE10’s is the only one that has circular dots all the way around. Opera’s probably looks the cleanest.
How Should it Look?
According to the spec, the border should be “a series of round dots”.
Who Gets it Right?
IE10 renders this closest to what the spec describes. Firefox is the only other browser that actually renders “round dots”.
Value: dashed
Observations:
Because of more generous spacing, Chrome, Safari, and Firefox render this quite differently from the others. Firefox has a bizarre way of not wrapping the dashes in the corners. Once again, Opera’s looks the nicest, while all the IE versions look pretty good too.
How Should it Look?
According to the spec, the border should be “a series of square-ended dashes”.
Who Gets it Right?
By the spec’s definition, everyone gets this right. Although, if you want to be really picky, you could say that Firefox’s ugly version is more accurate, since their dashes don’t cross over two sides like all the others do.
Value: double
Observations:
From what I can see, all browsers show the double border the same. There seems to be a slightly lighter color on the IE10 version of the border, but other than that, I don’t see any differences.
How Should it Look?
“Two parallel solid lines with some space between them”, and the total thickness of the lines plus the space should be the same as the value of the border-width value.
Who Gets it Right?
Everyone, from what I can tell.
Value: groove
Observations:
There are quite a few differences between the different rendering engines. The IE versions are the ugliest. And once again, Opera’s looks better than the rest.
How Should it Look?
It’s supposed to look like the border is “carved” into the page with shadows cast that are darker shades of the border color. I honestly don’t see these as being “carved”.
Who Gets it Right?
As far as I can see, none of them. But maybe I’m being too picky. To me, they resemble the impossible triangle.
Value: ridge
Observations:
IE10 has a really bold look compared to the others. IE7 and IE8 look ugly. Chrome’s is probably the most attractive.
How Should it Look?
This is supposed to be the opposite of “groove”. Instead of being carved into the page, this border should look like it’s coming out of the page.
Who Gets it Right?
To some extent, they all get it right. But not all are as obvious. Firefox, Safari, and Chrome are probably the most accurate.
Value: inset
Observations:
They all look pretty similar. IE7 and IE8 have darker shadowing plus a secondary inner shadow that the others don’t have.
How Should it Look?
This border is supposed to make the content inside the box look like it’s “sunken” into the page.
Who Gets it Right?
I think everyone gets this right except IE7 and IE8. To me, they all look “sunken”, except the older IEs which actually look more like “ridge” because of the extra shadow.
Value: outset
Observations:
These all look pretty good. The IEs are all darker. I think Safari and Chrome look the best, and I also like the way IE7 and IE8 look.
How Should it Look?
This is the opposite of “inset”. The content inside the box should look “raised” off the page.
Who Gets it Right?
To some degree, they all do. But believe it or not, I think IE7 and IE8 are more accurate than the rest. Those ones look especially “raised”. The problem with most of the others is that they’re just reversing the shadows from the “inset” value. This makes both “inset” and “outset” look quite similar. IE10 is probably the worst, and the ugliest.
Conclusions
As with many browser-rendered graphics, there are clear differences between the different rendering engines. As usual, these differences are pretty trivial, so I wouldn’t sweat using any of these values.
Just like form elements, you’ll never get these looking exactly the same cross-browser, and neither should you want need to. But if nothing else, it’s interesting seeing how the different browser makers interpret these different values.
great comparison, what about rounded corners ?
border-radius isn’t available in all browsers.
yes, it is (even IE9)
Well, no. Neither IE6, 7 nor 8 do not support rounded corners. All of which are WAY more widely used than IE9.
http://jonraasch.com/blog/css-rounded-corners-in-all-browsers
http://www.the-art-of-web.com/css/border-radius/
http://www.w3schools.com/cssref/css3_pr_border-radius.asp
Luckily enough in 2019 that’s not the case anymore.
https://www.w3counter.com/globalstats.php
Hi
if u use css3 pie, PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features. (border-radius, linear-gradient, box shadow).
If you attempt rounded corners on a coloured background, it’s interesting to see that very few browsers can handle them well, especially when shadows are thrown into the mix. Chrome and IE9 in particular struggle, which has caused me a lot of problems.
Hi
if u use css3 pie, PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features. (border-radius, linear-gradient, box shadow).
I think the grove/inset etc. would look better against a non-white background. A mid grey would show the visuals a little better.
Nice article.
[)amien
Yes, some other color combos would definitely help in some of those instances. But even with different colors, I still can’t get “groove” to look like it’s “carved” into the page. To me, it always looks like it’s extruded, like “ridge”.
Where are the spec from? W3C?
Yes, I linked to it in the intro. It’s here:
http://www.w3.org/TR/css3-background/#border-style
My descriptions of “How should it look” are summaries of what it says there.
If not for IE, but for the rest, some more differences may also occur when testing on different OSs too?
Hi Louis, I liked your article… you’ve compared some interesting elements.
But I don’t agree with your criticism on “Groove”. It clearly looks carved… exactly opposite “Ridge”. Other than that I really liked the analysis.
Interesting, thanks for that :) why would you not want for borders to appear the same across browsers “Just like form elements, you’ll never get these looking exactly the same cross-browser, and neither should you want to.”? – Out of interest
I probably worded that in a confusing way, but I was basically saying that since it’s impossible to get form elements to look exactly the same, then you shouldn’t want to. But I guess deep down, we *do* want to. :)
From all of these, I can honestly say that Explorer shows the most accurate design that I was looking for when I`m working with CSS.
Interesting, thanks for that.
Recently I had to create divs with a transparent dashed border, there I found out something really annoying:
Chrome doesn’t render 1 whole border, but it gives every side his own border (as in 4 seperate lines), so with transparent borders, the corners overlap and become less transparent..
IE9 and Opera 11 don’t do this (and other browsers dont work on my machine at this moment).
On the other hand,
The borders had to become non-transparent again when hovered over the div, but both IE9 and Opera only apply this when hovered over the border (and not when hovered over the rest of the div)
To get the border transparency I used rgba.
So in other words, I’ll use another trick to get this done ^^
PS: It’s not FF, but Fx.
Useful article, thank you. Maybe you can make another comparison of <hr>s, box shadows and text shadows.
Wow. this is so Interesting. But how does it’s work in Chrome browser, you didn’t explained that. Thanks for good article. :)
Nice comparison, thx.
Good article, but I have been having trouble getting a border to render in Chrome. Any ideas why it isn’t displaying and any fixes for this?
I need a link or something, otherwise I can’t help you.
But don’t know why peoples still use Internet explore or why microsoft don’t improve internet explore :(
The following attribute, as rendered in chrome,
can be accomplished with cross-browser friendly color rendering with this kind of solution:
You can make custom inset and outset borders in fact, with slightly darker bottom edges and lighter top edges, etc. And, since all browsers render solid borders exactly the same, the output should be identical across most all browsers.
Yee yee!
If the border-style property has two values: border-style: dotted solid; top and bottom borders are dotted. then right and left borders are solid.
Browsers use a combination of vector graphics and rectangular/circular clipping paths to render the different CSS border style values. Vector graphics, such as lines and curves, are used to draw the shape and size of the border. Rectangular and circular clipping paths are used to clip off portions of the border, leaving only the desired shape or design. For instance, the border-style value of ‘dotted’ will render a border with small round dots and the border-style value of ‘dashed’ will render a border with evenly spaced dashes.