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.

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.

• javascript
• html
• css
• colors

• Do you have JavaScript available? – Frederik Krautwald Commented May 28, 2015 at 12:19
• Yes sure ;) But that was not the point. – Xavier Haniquaut Commented May 28, 2015 at 16:29
• I can’t think of a way to do this with pure CSS. A CSS pre-processor could do it; or JavaScript. In any case, it would be complicated. – Frederik Krautwald Commented May 28, 2015 at 19:55
• 1 Yeah, that is what i thought, but i would not be surprised if some css wizard found a way to do that with a tricky combination of shadows and blendings... :) – Xavier Haniquaut Commented May 28, 2015 at 19:58
• Important to bear in mind before using this for text, focus outlines, UI elements etc: this does not necessarily result in good enough colour contrast to meet WCAG accessibility standards and be readable. Always check your contrast ratios. Not saying the original poster was going to do this but I think this could be useful info for people finding this post. See codepen example – Peter Cole Commented Apr 4, 2023 at 8:26

1 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