Control the two colors of an inset border?

html css border insets
Philll_t picture Philll_t · Jul 12, 2013 · Viewed 13.5k times · Source

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.

Answer

Philll_t picture Philll_t · Jul 12, 2013

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

Related questions

Placing border inside of div and not on its edge

I have a <div> element and I want to put a border on it. I know I can write style="border: 1px solid black", but this adds 2px to either side of the div, which is not what …

Read More
How to set a border for an HTML div tag

I am trying to define a border around a div tag in HTML. In some browsers the border does not appear. Here is my HTML code: How do I set a border for an HTML div tag?

Read More
How to increase space between dotted border dots

I am using dotted style border in my box like .box { width: 300px; height: 200px; border: dotted 1px #f00; float: left; } I want to the increase the space between each dot of the border.

Read More