Search code examples
htmlcssgoogle-chromecolors

Chrome using wrong border color on left on tall objects with border-radius set

I believe there may be a bug in chrome's rendering of border colors. Here is the setup:

  1. Create an element (I have seen it on div's as well as td's, both position:static and position:absolute).
  2. Make this object more than twice as tall as it is wide
  3. Assign a different color border to each side.
  4. Specify a border-radius for rounded corners.

The end result is that a the middle portion of the left edge takes on border-right-color instead of border-left-color. Specifically, if w is the width of the object, then the top w pixels and the bottom w pixels are correct, but the middle (h - 2w) pixels are colored incorrectly.

Here is a snippet of code and a screenshot demonstrating the issue.

<!doctype html>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<html>
  <head>
    <style>
      div#borderBug
      {
        position:absolute;
        top:10px;
        left:10px;
        width:152px;
        height:541px;
      
        border-width: 2px;
        border-style: solid;
        border-radius: 20px;
      
        border-left-color: blue;
        border-top-color: yellow;
        border-right-color: red;
        border-bottom-color: green;

        background-color: #dedede;
      }
    </style>
  </head>
  <body>
    <div id="borderBug"></div>
  </body>
</html>

Incorrect Left Border in Chrome

My version of Chrome is 17.0.963.56 m, running on Windows XP. I do not see the issue in Safari, Firefox, or IE8.

Can anyone confirm if this is a known issue, or does anyone know of a standard workaround?

The best workaround I can think of is using an image for the border, but I have not yet been able to test this and see whether it suffers from the same bug.

Another (ugly) option might be to place another HTML Element of the correct color on top of the offending section of border.

Solution

  • Confirmed known issue:

    Issue 106028
    merged into Issue 113726