Skip to content Skip to sidebar Skip to footer

Weird Dark Border :after Css Arrow In Firefox

In an attempt to make an arrow in pure CSS for my tooltip, I ran across a problem in Firefox: I tried to find what was causing the dark border in Firefox without success. Here is

Solution 1:

2015's EDIT

Now it works by using both RGBa and transparent; appearently, the Bug has been resolved (maybe incidentally, because it is still in state NEW , instead that on FIXED).

If it still happens to you, you're probably running an old FireFox version (the current one is 38.0.5), and you can use the workaround in the answer to overcome the problem.


It is the

Bug 646053 - dark diagonals at corner joins adjacent to transparent borders

The workaround is to use RGBa instead of transparent:

/* old */border: transparent solid 6px;
border-right-color: #fff;

/* new */border: rgba(255,255,255,0) solid 6px;
border-right-color: #fff;

Post a Comment for "Weird Dark Border :after Css Arrow In Firefox"