In my website's drop down menu, an element's top, left and right borders are set to gray and bottom border is set to white. This works perfectly in FF3, Chrome to achieve a beautiful drop down menu with a continuous border.

But, I see a white dot on the left hand side from FF4+ and in IE9+

I think the issue is, in FF3, the bottom left pixel was given the same color as the left border. But in FF4, the bottom left pixel is given the same color as the bottom border!

This is looking ugly. How can I fix this so that, the entire left side of the drop down menu is one continuous gray line?

What I am doing here is, the sub-menu has a full gray border. I want to remove the gray border between the "Projects" and the sub-menu itself so that it all appears as a single thing with continuous border with no divisions in between. So I made the "Projects" bottom border white and set it to overlap the sub-menu by 1px. So, part of the gray border of the sub-menu disappears and it appears continuous. But in FF4 and IE9, the bottom left and bottom right pixels respectively are screwing things up.

Hover over the Projects menu in http://www.softinternals.com and you can see this on the left side border in FF4.

Here are screenshots of the drop-down menu:

Firefox 4:

Internet Explorer 9

---

I did more research and found this:

When applying a single pixel thick border, each browser and each version of the same browser seem to have a different idea about what color to choose for the corner pixels.

Firefox 3

This is what I want :) It suits my drop down menu well as the bottom left color is taken from the left border.

• Bottom left and bottom right corner pixels take the color of the left and right borders respectively.
• Both the corners at the top take the color of the top border.
• Bottom border's color isn't taken for any corner.

Firefox 4

This is not what I want :(

• Each corner pixel takes the color of the border that comes before it, going in clockwise direction.

Internet Explorer 8

Also not what I want.

• Similar to FF3, but left doesn't take anything. Right takes all. Top and bottom one corner each.

Chrome 11

Somewhat close to what I want :)

• The color of each corner pixel is the interpolated value of the colors of adjacent borders.

Internet Explorer 9

I Didn't have access to IE9 when taking scree开发者_StackOverflow中文版nshots, but it also should be doing things differently with the bottom right pixel.

As you can see, each browser's decision regarding corner colors is different.

To make my whole drop-down menu have 1 continuous border, I want the bottom left and bottom right pixels to take the color of the left and right borders respectively. Is there any way I can do this in the major browsers?

If not, looking at my drop-down menu, can you suggest some other way to get that single continuous border around the whole thing without white dots or discontinuations anywhere?

---

Try:

• Remove the bottom border
• Set 1px bottom padding (or add 1px to the existing bottom padding)
• Set background color to white

This should extend the left and right borders to the bottom of the element, while the white background color should cover the sub-menu top border.

---

I found this issue is because border-bottom is set to #FFF in:

.hover-menu
{
    ...
    border-bottom: solid 1px #FFF !important;
    ...
}

I resolved changing to:

.hover-menu
{
    ...
    border-bottom: solid 0 #FFF !important;
    ...
}

or

.hover-menu
{
    ...
    border-bottom: none !important;
    ...
}