CodeinWP CodeinWP

How Do Browsers Render the Different CSS Border Style Values?

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

Dotted borders in different browsers

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

Dashed borders in different browsers

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

Double borders in different browsers

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

Groove borders in different browsers

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

Ridge borders in different browsers

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

Inset borders in different browsers

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

Outset borders in different browsers

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.

29 Responses

  1. keukeu says:

    great comparison, what about rounded corners ?

  2. Damien Guard says:

    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”.

  3. knight says:

    Where are the spec from? W3C?

  4. IT Mitică says:

    If not for IE, but for the rest, some more differences may also occur when testing on different OSs too?

  5. Maverick says:

    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.

  6. Edd Turtle says:

    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. :)

  7. Aviran zazon says:

    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.

  8. vincent says:

    Interesting, thanks for that.

  9. 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 ^^

  10. Khalid says:

    PS: It’s not FF, but Fx.

  11. Daniel says:

    Useful article, thank you. Maybe you can make another comparison of <hr>s, box shadows and text shadows.

  12. Techroid says:

    Wow. this is so Interesting. But how does it’s work in Chrome browser, you didn’t explained that. Thanks for good article. :)

  13. Sylwia says:

    Nice comparison, thx.

  14. Tom Howlett says:

    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?

  15. Umer Rock says:

    But don’t know why peoples still use Internet explore or why microsoft don’t improve internet explore :(

  16. AcidFire says:

    The following attribute, as rendered in chrome,

    
    border: 3px outset #ddd;
    

    can be accomplished with cross-browser friendly color rendering with this kind of solution:

    
    border-top: 3px solid #ddd;
    border-left: 3px solid #ddd;
    border-right: 3px solid #8D8D8D;
    border-bottom: 3px solid #8D8D8D;
    

    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!

  17. 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.

  18. Sandy Smith says:

    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.

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).