15

Is there a method in which I can change the opacity of a border which is being set to inherit it's color from currentColor? i.e. inherit currentColor in #inner2 and set it's opacity to 0.25.

Searching for a pure css solution please.

For example, something which resembles the following:

#outer{
  color: rgba(255,0,0,1);
}

.inner{
  display: block;
  width: 100%;
  height: 10px;
  margin-bottom: 5px;
  border: 2px solid currentColor;
}

#inner2{
  /* This is where I want to inherit current color */
  /* ... but still set it to 0.25 opacity */
  border-color: rgba(255,0,0,0.25);
}
<div id='outer'>
  <div id='inner1' class='inner'></div>
  <div id='inner2' class='inner'></div>
</div>
Zze
  • 16,928
  • 11
  • 80
  • 110

3 Answers3

7

You are confusing currentColor value with inherit which is the default. you don't use currentColor for border properties because that it the default value for the border. you only use it for background.

#inner1 and #inner2 both inherit from the closest parent which has a color set to it (red) and the border is using that color by default.

Below solution will work 100% of the time, regardless of the color's source
(inline style attribute, external CSS or distant ancestor inheritance):

#outer{ color:red; }
#inner1, #inner2{ 
    padding: 2em; 
    margin-top: 1em;  
}
#inner1{ border:5px solid; } 

#inner2{ position:relative; }

#inner2::before{  
  content:'';
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  border:5px solid;
  opacity:.5;
}
<div id='outer'>
  <div id='inner1'>inner 1</div>
  <div id='inner2'>inner 2</div>
</div>
Community
  • 1
  • 1
vsync
  • 103,437
  • 51
  • 275
  • 359
  • hmmm ok yeah, interesting... this seems like a feasible solution. Is `#inner2` smaller than `#inner1` in the example - not sure why though>? – Zze Jul 13 '17 at 08:33
  • yes it acts different since the border is not a real part of the div, but is *over* it, so it does not take any space. you can solve this by using `box-shadow` on both, instead of `border`, or just compensate using different `padding` on the second `div` – vsync Jul 13 '17 at 08:37
  • @Zze - give `#inner1` - `box-shadow: 0 0 0 5px inset;` instead of border :) – vsync Jul 13 '17 at 08:45
4

You can use css-variables to achieve similar behaviour:

#outer{
  --border-r: 255;
  --border-g: 0;
  --border-b: 0;
  color: rgba(var(--border-r),var(--border-g),var(--border-b),1);
}

.inner{
  display: block;
  width: 100%;
  height: 10px;
  margin-bottom: 5px;
  border: 2px solid;
}

#inner2{
  color: rgba(var(--border-r),var(--border-g),var(--border-b),0.25);
}
<div id='outer'>
  <div id='inner1' class='inner'></div>
  <div id='inner2' class='inner'></div>
</div>
fen1x
  • 5,287
  • 6
  • 29
  • 36
  • you don't need to write `currentColor` in the border, it's meaningless. – vsync Jul 13 '17 at 08:38
  • Thx, I forgot to remove it =) – fen1x Jul 13 '17 at 08:40
  • while this works, this solution is not *flexible*, since the colors might come from an inline `style` attribute or external CSS file, or if the color is coming from an unknown distant ancestor (so you cannot exactly know where to set up the variables) – vsync Jul 13 '17 at 11:14
  • I was inspired by this, I *do* think this does work, just needed some tweaks. Check out this demo: https://codepen.io/nicetransition/pen/bGWOVMN – Kevin Mack Aug 09 '21 at 15:52
  • @vsync `currentColor` is the color of the text of that same element, it's not meaningless. If you want the border to be the same as `color:` property than use currentColor – Vitim.us Apr 28 '22 at 03:36
1

Check this out:

:root {
  --color-r: 0;
  --color-g: 0;
  --color-b: 0;
  --color-a: 1;
}

[class*=-color] {
  color: rgba(var(--color-r), var(--color-g), var(--color-b), var(--color-a));
}

[class*=-background] {
  --background-r: var(--color-r);
  --background-g: var(--color-g);
  --background-b: var(--color-b);
  --background-color-a: var(--color-a);
  background-color: rgba(var(--color-r), var(--color-g), var(--color-b), var(--color-a));
}

[class*=dark] {
  --color-r: 0;
  --color-g: 0;
  --color-b: 0;
}

[class*=light] {
  --color-r: 255;
  --color-g: 255;
  --color-b: 255;
}

[class*=primary] {
  --color-r: 200;
  --color-g: 2;
  --color-b: 33;
}

[class*=secondary] {
  --color-r: 102;
  --color-g: 102;
  --color-b: 102;
}

[class*="--alpha-0"], [class*="--alpha-00"] {
  --color-a: 0;
}

[class*="--alpha-10"] {
  --color-a: .1;
}

[class*="--alpha-20"] {
  --color-a: .2;
}

[class*="--alpha-30"] {
  --color-a: .3;
}

[class*="--alpha-40"] {
  --color-a: .4;
}

[class*="--alpha-50"] {
  --color-a: .5;
}

[class*="--alpha-60"] {
  --color-a: .6;
}

[class*="--alpha-70"] {
  --color-a: .7;
}

[class*="--alpha-80"] {
  --color-a: .8;
}

[class*="--alpha-90"] {
  --color-a: .9;
}

[class*="--alpha-100"] {
  --color-a: 1;
}
Kevin Mack
  • 96
  • 5