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.

Solution 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;
}

Solution 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;

Comments

[Ariane]

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.