Home/ Questions/Q 7750619
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T11:20:16+00:00

Google Chrome is acting buggy using border-radius, background color, and top and bottom borders.

  • 0

Google Chrome is acting buggy using border-radius, background color, and top and bottom borders. Here’s the evidence and code to reproduce:


enter image description here

http://jsfiddle.net/6ADtd/4/

<div></div>​


div {
  background:blue;
  border-top:10px solid red;
  border-bottom:10px solid red;
  border-radius:20px 20px 0 0;
  height:100px;
  /*
  border-right:1px solid transparent;
  */
}

The border-right:1px solid transparent; is a trick suggested in the comments which did help remove the unwanted middle solid bar, but when you resize the window/browser – it appears again. It has something to do with the proximity of the element to the edge of the browser window, I can’t quite understand it. You have to resize then hover over the element sometimes.
​
Videos from my desktop:

I’ve tried -webkit- prefixes on several properties and was unable to fix it.

I first posted this because I needed a quick fix for a specific website, but now I’m noticing it show up on several sites and I’ve nailed down what causes it. That’s what I get for not testing in anything but Firefox. This is probably a bug and I should report it, but I’m still stuck in need of a fix in the meantime.

The ideal solution is with CSS, so I can write one or two selectors in the CSS file for the fix instead of digging through loads template files and in the database to apply div-wrap or other markup fixes. Does anyone know any tricks to get rid of this bug?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    At the time of me looking into this question, there was still an issue on the prod website visible when the browser is resized to force horizontal scrolling on the document:

    fits horizontally - no defect
    scrolls horizontally - visible defect

    The “solution” I used was to apply both

    border-left:1px solid transparent;
border-right:1px solid transparent;

    to #header with developer tools – this seems to force the issue to go away regardless of resizing, at least on a Mac Chrome 18.

    This seems like buggy behaviour to me – I’d speculate it would have something to do with blending corners where colors intersect, which, because of a bug, end up bleeding into the element itself.

    I’ve attempted to, rather fruitlessly, look into the possible connection between a border radius higher than the border width causing this behaviour. This was, of course, untrue – playing around with different x-/y-radii yielded no results without having the “solution” from the above applied. Good to know I guess.

    • 0