16

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.

Philll_t
  • 4,267
  • 5
  • 45
  • 59
  • 1
    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. – Philll_t Jul 12 '13 at 02:27
  • 1
    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. – Ariane Jul 12 '13 at 02:28
  • Yeah, you're right. As I was reading my question back it came to me, I answered my own question. Had a brain fart. – Philll_t Jul 12 '13 at 02:30

2 Answers2

19

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;
}
Philll_t
  • 4,267
  • 5
  • 45
  • 59
  • 7
    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. – Ariane Jul 12 '13 at 02:30
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;
underscore_d
  • 6,309
  • 3
  • 38
  • 64
Ganapati prasad
  • 39
  • 5