currentColor with opacity

Issue

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>

Solution

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>

Also, see my other answer here which uses cutting-edge syntax.

Answered By - vsync