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

[CarlyRaeJepsenStan]

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.

So I immediately added some border radius settings, and lo and behold!

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.

[khalby786]

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

[CarlyRaeJepsenStan]

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

[khalby786]

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.

[CarlyRaeJepsenStan]

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

[2salted]

I had the same problem the solution is to just do border: 2px solid #[yourcolorhere]
instead of border-color: #[yourcolorhere] this worked for me!

[wh0]

this comes from the transition from native widgets to css boxes when you start adding any styling.

I made a random button on a site and looked at it. The border color was a nice consistent gray.

native widget, which in the current era of operating system UI toolkit design, is flat.

So I immediately added some border radius settings, and lo and behold!

this makes it go with a default style which I think has border-style: outset. see sample here border-style - CSS: Cascading Style Sheets | MDN.

probably this default was decided when buttons used to look like this

when was less of a difference between native and the outset style.