15

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.

5
  • Do you have JavaScript available? Commented May 28, 2015 at 12:19
  • Yes sure ;) But that was not the point. 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. 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... :) 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

17

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

2
  • 2
    I'm quite impressed by that (extended demo); I hadn't come across mix-blend-mode before. Commented May 29, 2015 at 0:27
  • Same as davidThomas, pretty impressed by the trick and never seen before. Thanks @FrederikKrautwald for this nice trick ;) Commented May 29, 2015 at 10:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.