Different Values CSS Border Style

 All we often use the property CSS border-style, and I think that will not be mistaken assumption that most often we use the value of solid - solid line. She looks like a solid line in all browsers, it is absolutely the same.Other values ​​of this property is used by webmasters is quite rare, and many, though unaware of their existence, never in my life did not use them - somehow do not need. Well, on the strength of the values ​​of "dashed" or "dotted", and then not often.

So many of us do not know that border looks different in different browsers. We suggest to consult the articles of Louis Lazaris IMPRESSIVE WEBS, in which it holds an interesting comparison of the display of the CSS properties in major modern browsers. Screenshots and tests were conducted on the basis of Windows 7.

Used to test the code

The experiment used the following css-code with these variations in color and 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 */
}

In some examples, the value of border color changed to more clearly show the difference map.

So there you go.

A. The value of dotted (dashed)




Observations: In some cases, our point look like diamonds, in others - the squares, in the third - circles. Firefox, Chrome and Safari renders the corners of the powerful at the expense of stuck pixels.Only displayed the IE10 around the perimeter of the circular points. A dotted line of the Opera, perhaps, is more accurate of all.

How should it be?
In accordance with the specification, the border with this value should be "a sequence of circular dots."

Who is right?
IE10 clearly shows the closest to what is said in the specification. Of all the other browsers only Firefox renders at least 'round the point. "

Two. The value of dashed (shading)




Observations: once again excelled Chrome, Safari and Firefox - because of the larger spaces of the shading is clearly different than the rest. Firefox somehow foolishly did not bounding angles. Again, Opera renders more beautiful than others, but variants of IE, in principle, no worse.

How should it be?
In accordance with the specification, the border with this value should be "a sequence of strokes with the flat / square ends."

Who is right?
If you follow the specifications, all right. And at the same time, if the fault, the ugly version of Firefox is just more than others fit the description, as his strokes do not overlap at the corners, like everyone else.

Three. The value of double 

Observations: the fact that we see all the browsers displayed the same double line. Kind of like IE10 made ​​it a little lighter, but it is only noticed the difference.

How should it be?
"Two parallel solid lines with a small gap between themselves", and the total amount of tolshita lines with an interval to be exactly equal to the specified value of border-width.

Who is right?
As for me, that's all.

4. The value of groove 


Observations: the difference in the browser is almost imperceptible. Variants of the most unsightly IE.And again, Opera looks better than others.

How should it be?
assumed that the boundary should be "cut" on the page with the shadows that are darker than the specified border color. I honestly do not see that at least one of them was "cut".

Who is right?
In my opinion, no. Maybe I'm overly picky

Five. The value of ridge 



Observations: IE10 clearly shows the boundary of the mass of others. IE7 and IE8 look unpleasant.Chrome, perhaps, all displayed the nicer.

How should it be?
is assumed that this option, the opposite groove. If the groove «bumps" in the page, the ridge has to "perform" from its surface.

Who is right?
To some extent, reflect properly all. But not everything is quite clear. Firefox, Safari and Chrome, perhaps, look more carefully.

6. The value of inset 



Observations: all look about the same. Shadows in IE7 and IE8 is clearly too dark, but still second inner shadow, which has no other options.

How should it be?
border to create this effect, that the contents of the container seems to be "depressed" in the page.

Who is right?
I think everything except IE7 and IE8. Everything looks "sunken", except for old versions of IE, which more resemble a second ridge from the inner shadow.

7. Value outset (the speaker)



Observations: All look wonderful. All versions of IE a little darker. I think that Safari and Chrome all look better, but like it and look in IE7 and IE8.

How should it be?
This is the opposite of inset. The contents of the container should look like "elevated" above the page.

Who is right?
To some extent, everything. But, you want to settle it or not, I think IE7 and IE8 better than any other show, "elation." The rest all just tolerate shadows on the opposite side compared to the inset, which is why both values ​​seem to be very similar. A general IE10 somehow looks ugly.

Findings

As always happens with the graphics, which renders the browser, there is a clear difference in the mapping of different engines. And as usual, these razlisiya pretty insignificant, so that we can not bothered priment all of these values.

Just as in a situation with elements of form, you will not get absolutely identical in all browsers display the boundaries, and this makes no sense. But, at least, should know what the difference is in the mapping of different values.

On the article IMPRESSIVE WEBS