Control the two colors of an inset border?

Question

I'm trying to see if there's a way to change the two colors of the inset border in CSS

As you know, the inset style creates a border on an element that creates the illusion that that it has an embedded border. It achieves this by making the bottom and right border the color you selected, and changes the color of the top and left border a slightly darker shade.

Does anyone know of a way where you can control how dark, or maybe even different color the alternate shade would be?

#myElement{
    border: inset 1px white;
}

Thanks.

Metaphrase

This question is so stupid, I just realized a fix reading this. I'll leave this up though, just in case someone else is trying to achieve this. – Metaphrase

You just need to create your borders manually. border-left: 1px solid #somecolour; and same for right, top and down. If you're not sure how to reproduce the inset effect, take a screenshot of a border set to inset, and use the same colours. Then move from there. – Welter

Yeah, you're right. As I was reading my question back it came to me, I answered my own question. Had a brain fart. – Metaphrase

Answer 1

I don't think you can control it the way I mentioned, but for sure you can control the individual color of each border:

#myElement{
  border-style: solid;
  border-width: 1px;
  border-top-color: black;
  border-left-color: black;
  border-right-color: white;
  border-bottom-color: white;
}

Metaphrase

Indeed. +1 for taking the time to answer yourself, because we all have our episodes of stupidity, and we're not always able to find the obvious solution by ourselves. – Welter

Answer 2

If you want to use the same color for all sides of the inset border, try this, which I used and worked fine.

border-style: solid inset solid solid;

Soper