How to line up rounded corners with a border in a separate element?

Question

I'm trying to achieve rounded corner borders in a document with three divs. The top div will contain the top corner, the middle div a straight section, and the third the bottom corner. I'm applying border-top-left-radius and border-bottom-left-radius to the first and third divs respectively.

You can see what this looks like here: https://codepen.io/thomasjm/pen/zYNgzXv

The trouble is, in Chrome there's some anti-aliasing issue (I think) that causes it to look jagged where the divs meet. (You may need to zoom the browser in to see it clearly.)

I've noticed I can make it look okay by increasing the width of the corner pieces slightly, to 4.1px or so instead of 4px . But I'm hoping to find a real solution.

EDIT: I'm using Chrome 90.0.4430.72 on Ubuntu 20.04.2.

EDIT 2: it looks strange in a totally different way on Firefox, where there seems to be some antialiasing near the top and bottom only:

Answer 1

I found a way to fix it. It seems to only happen when an alpha channel is present in the color. So if I change the color from rgb(66, 133, 244, 0.5) to rgb(66, 133, 244) , the boundary between the divs becomes perfectly smooth.