Geek asks and answers

CSS border is jagged with various sizes / color borders

It seems that when you have an element with different sizes / color borders, you can see a very strange jagged line. I had never noticed this before, but looked at Vimeo a super hot new design when I noticed (I don't want to say “crash”) a strange appearance.

So, if you have a div hanging, as shown below, you will notice the pixel pitch (almost like it is set to insert, not solid ...)

div {
    height            : 25px;
    width             : 50px;
    background        : #eee;
    border-style      : solid;
    border-color      : green;
    border-left-color : black;
    border-width      : 3px 3px 3px 15px;
}

Does anyone notice this / know why this is happening?

+5
source share
3 answers

The reason for this is that it creates a “frame” around the window.

, , 4 . , .

, , , .

Alternative

div:before{border-left: 15px solid #000;}, , .

+4

"" - , . .

<div> , - http://jsfiddle.net/mFzrA/

BTW - , CSS- . 3 , .

+3

I just wanted to suggest using box-shadow on a border with a larger border width to avoid a jagged line. Works for me, hope this helps :)

div {
    height            : 25px;
    width             : 50px;
    background        : #eee;
    border-style      : solid;
    border-color      : green;
    border-width      : 3px 3px 3px 0px;
    box-shadow:-15px 0px black;
}
+2
source

More articles:


All Articles