CSS - computed border color doesn't match actual border color

Question

I have some ordinary buttons with a Tailwind class border-myCustomColor . In the computed styles in devtools, all sides are identical. But in the screenshot, you can see that the bottom/right sides are different to the top/left sides.

BUT

I'd love to a) fix it; but mostly b) understand how the computed styles could be wrong

If some other effect was being inherited from somewhere, shouldn't that be reflected in the computed styles?

Answer 1

It looks like you're using border-style: outset .

Try adding border-style:none , or border-style:solid in your desired border css property. To make it more compact you can also use border: {width} solid {calculated color}

See examples