How can I change the button border color dynamically?

I'm making an outlined button component and getting the button colors dynamically in hex type by the backend. Whatever color comes, the hover color should be one tone darker than the normal color. I used filter: brightness(85%) for button text color but I can't use it for border color. How can I dynamically make the hover color of the border color one shade darker? By the way, I saw that there are recommendations for using HSL in similar questions, unfortunately it is not possible for me to use HSL at this stage.

I'm sharing the snippet below to make it a little more descriptive. In my case, instead of predetermined colors, there are colors that come from the backend as hex code and are kept as css variable.

.outlined-button {
  color: #FF0000;
  border: 5px solid #FF0000;
  width: 400px;
  height: 100px;
  font-size: 20px;
  background-color: transparent;
  transition: all 0.15s linear;
  cursor: pointer;
}

.outlined-button:hover {
  color: #aa2c2c;
  border: 5px solid #aa2c2c;
}

<button class="outlined-button">hi</button>

Solution

Instead of a border you can use an inset box-shadow

example:

button {
  border:0;
  outline: 0;
  padding: 7px 10px;
  color:white;
  background: #32aae1;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.2)
}

button:hover {
  filter: brightness(85%)
}

<button>My button!</button>