Weird border colors: am I the only one seeing this?

While trying to edit my border radius and colors, I noticed this very strange phenomena:


The code in question is :

login {
  border-color: red blue red red
}
#signup {
  border-color: red red red blue
}

along with some flex and border-radius stuff. Anyway, as you can see the colors are oddly darkened in random places, like an inset border style.

I figured this was an issue derived from one of my previous stylesheets but it was not the case (the screenshot shown is using a different css file that isn’t my main one). Additionally, I viewed the site in another browser and it looked the same. So I tried opening this in another browser, and it looked the same.

Determined to track down the source of this mystery I made a random button on a site and looked at it. The border color was a nice consistent gray.
Screen Shot 2020-07-14 at 9.19.54 PM

So I immediately added some border radius settings, and lo and behold!
Screen Shot 2020-07-14 at 9.19.32 PM Screen Shot 2020-07-14 at 9.21.41 PM
As long as the border radius is changed, the border color changes too.
Has anyone else noticed this? I used Opera 69 and Safari 13 to test this.

I think that’s part of the default button styles which needs to be explicitly defined for it to be overwritten :thinking:

Do you also see this kind of weird stuff in your code?

If you create a button and only set values like background color, the default border and box shadow tends to remain and I’ll have to explicitly define border: none or give it another value. It also depends on the browser.

Ha ha yeah, I set the border to none and my buttons look alright now.