Border color based on background

Question

I frequently take advantage of darken and lighten in my SASS styles. I'm currently writing a class which will have a border, but will depend on another class for background color. What I want to do is set the border color to a darken of the element's background color.

Something like this:

.blue { background: #00f; }
.red  { background: #f00; }

.border { border: 2px solid darken(background, 20); }

Then the markup would be:

<div id="colored-box" class="blue border">
  <p>
    I have a dark blue border!
  </p>
</div>

<div id="colored-box" class="red border">
  <p>
    I have a dark red border!
  </p>
</div>

Naturally, if this worked as I have it written here, I wouldn't be posting this as a question on SO :)

So the question is: Can I base a border color on the background attribute dynamically, and if so, how?

Echelon

Answer 1

While not a SASS solution, you could just use rgba.

.border {
  border: 2px solid rgba(0,0,0, 0.25);
}

See this jsfiddle as an example.

Skewback

this is the most natural way. +1 – Hypnosis

Although I do like taking advantage of SASS mixins, this is by far the most straightforward answer, and makes it much easier to tie into my existing styles than other answers. Thanks! – Echelon

Answer 2

I would use a mixin like this:

.darkenBorder(@color) {
    &.border { 
        background: darken(@color, 20);
    }
}

That way, you can easily add a darkened border style to any color:

.blue { background: #00f; .darkenBorder(#00f); }
.red  { background: #f00; .darkenBorder(#f00); }

---

Even simpler (or more DRY at least), using the same idea:

.colorStyles(@color) {
    background: @color;
    &.border { 
        background: darken(@color, 20);
    }
}
.blue { .colorStyles(#00f); }
.red  { .colorStyles(#f00); }

---

Output:

.blue {
  background: #00f;
}
.blue.border {
  background: #000099;
}
.red {
  background: #f00;
}
.red.border {
  background: #990000;
}

Comforter

Answer 3

as already said, i would go for this, but with a safe reset of background-clip;:

.border { border: 2px solid rgba(0,0,0,0.2);/* set here opacity to darken 
to lighten , use rgba(255,255,255,0.X) , any other color can be used too*/
background-clip:border-box; /* make sure bg is layed under border */
}

DEMO

---

see this as a reminder of use of rgba() colors , as hsla() colors

Hypnosis

the use of rgba colors can be used to lighten, darken or add a color easily : codepen.io/gc-nomade/pen/wouBe it is basic color layer sprayed hover anything, just a reminder actually :) – Hypnosis

Answer 4

There are 2 ways to darken border color (currently - no sass).

1. as @user3341679's answer, using rgba().
2. is using filters birghtness() with opacity().

.box {
    border: 5px solid rgba(100, 100, 100, 1);
    filter: brightness(.72) opacity(.7);
}

Full example: https://jsfiddle.net/3qwo85js/2/

Image preview

Darken border using 2 way of css.

Zoom in of darken border color.

Formulate