Substitute to css outline-color: invert

Question

Long time ago, with outdated browsers (chrome38) people could make boxes...

It was possible to use outline-color: invert to choose a color who was the exact opposite of the background.

Today, such a great feature does not exist anymore :( Do yo have an idea for me who just want to display boxes with borders of the opposite color of the background ?

(today chrome (39) compute outline-color: invert to outline-color:transparent.

before that outline-color: invert rendered to outline-color: rgb(255,255,255) on a black brackground.)

Thanks for your ideas.

Answer 1

Perhaps this does the trick for you?

.background {
  display: inline-block;
  margin: 10px;
  padding: 20px;
}
.box {
  border: 3px solid white;
  height: 100px;
  width: 160px;
}
.invert {
  mix-blend-mode: difference;
}

<div class="background" style="background: #ff0000">
  <div class="box invert"></div>
</div>

<div class="background" style="background: #000000">
  <div class="box invert"></div>
</div>

<div class="background" style="background: #ffffff">
  <div class="box invert"></div>
</div>

http://codepen.io/Frikki/pen/BNpKYb