How to prevent seams in borders of different widths when using CSS3 Rotate and Firefox?
css-transitions, firefox
Solution
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 `border`s, the seams are in slightly different positions, so what is underneath doesn't show.
Problem
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.