Question

I have different widths for borders applied to a div, and only Firefox shows thin seams when the div is rotated to any angle using CSS3 Transition Rotate. These thin seams change slightly depending on angle.

If the borders are the same width, Firefox behaves nicely.

The div is not using an image, just a colored background, but the content seems irrelevant for the border of different widths issue I’m having.

Unfortunately the area behind the border is going to be reserved so I’m not able to use another div as a wrapper.

Here’s a jsFiddle of an example to be seen in Firefox that has this issue. There are no issues in Chrome.

Status Update: Updated jsFiddle to show border-style prior to border-color per CSS rule but no change.

I wonder if this issue is because border-image property, which I am not using, allows up to eight images, one for each border slice. That said, if there were border-corner-color properties then that would solve the issue when using Rotate.

Answer 1

I have made a solution using :before in CSS: jsFiddle example.

I added this code:

#thinLinesInFirefox:before {
    content: '';
    display: block;
    width: 201px;
    height: 201px;
    position: absolute;
    top: -105px;
    left: -120px;
    border-top:    104px;
    border-right:  110px;
    border-bottom: 115px;
    border-left:   119px;

    /* Define border-style before border-class per CSS rule. */    
    border-style: solid;

    /* Define boder-color */
    border-color: black;

    z-index: -1;
}

Basically, it overlays the same square using :before, except I have decreased the border-top and border-left by 1 pixel, and then increased the width and height by 1 pixel so that the ‘real’ div underneath appears to be the same size.

Because of the different borders, the seams are in slightly different positions, so what is underneath doesn’t show.