Question

This image should illustrate the problem quite well: (Fullsize)

As you can see, there appears to be a bug with how Chrome handles border colours when there’s a border radius involved. There’s a very definite cutoff, roughly when the aspect ratio of the box is 2:1 or wider.

You can imagine this makes my tab system look extremely bad in Chrome…

Is there any way to fix this behaviour?

Live demo of the problem

Answer 1

I haven’t exactly solved it, but this is a bit big for a comment.

The unit doesn’t matter it’s the same with em, cm, ect.

div.box1 {
 border-radius: 64px;
 border-bottom-left-radius: 0px;
  /* OR 
    border-radius: 64px 64px 0px 64px;
  */
}

Will work (the light bit streches all the way), but adding a border-bottom-right-radius will muck it up again

As soon as one of the border-bottom-XXX-radiuss gets below 62px, it stops.

I don’t know if this will help find the answer, but hopefully it will.