CSS filter brightness: can it be applied separately to border and body of one element?

Question

This element already has filter: brightness(50%) applied to it:

.element {
  width: 300px;
  height: 250px;
  border: 5px solid white;
  padding: 2px;
  background-color: darkblue;
  color: white;
  filter: brightness(50%);
}

<div class="element">
  <p>element has brightness of 50%</p>
  <p>I want the border to have brightness of 100%</p>
  <p>How could one do this?</p>
</div>

I am trying to figure out how to apply CSS filter: brightness(100%) to only the border of the element. Several hours of scouring online documentation have yielded no results. Forgive me if it is something simple, but to reiterate how can I independently apply CSS filter: brightness() to the border of an element that already has brightness applied to it?

Answer 1

Use a pseudo element for the background then apply the filter to only the child elements and the background. Like that the border will not get affected by the filter and you will get the same visual result:

.element {
  width: 300px;
  height: 250px;
  padding: 2px;
  background-color: darkblue;
  border:5px solid #fff;
  color: white;
  position:relative;
  z-index:0;
}
.element:before {
  content:"";
  position:absolute;
  z-index:-1;
  background:darkblue;
  top:0;
  left:0;
  right:0;
  bottom:0;
  filter:brightness(50%);
}
.element > * {
  filter:brightness(50%);
}

body {
  background:pink;
}

<div class="element">
  <p>element has brightness of 50%</p>
  <p>I want the border to have brightness of 100%</p>
  <p>How could one do this?</p>
</div>

Answer 2

You can write a another css class to get the brightness.

.element 
 { 
  width: 300px; 
  height: 250px; 
  padding: 2px; 
  background-color: darkblue; 
  color: white; 
  filter: brightness(50%); 
 } 

.border
 { 
  border: 5px solid rgba(29, 27, 27, 0.9); 
  width: 300px; 
  height: 250px; 
 } 

Here I used border colour as black to ensure that border is applied or not. It's coming you can use this code with the colour which you want:-)