<style>
#el1 {
--foreground: 100;
border: 30px dashed rgb(100, 0, var(--foreground));
}
#el2 {
border: 30px rgb(100, 0, var(--foreground)) dashed;
div {
width: 150px;
height: 150px;
</style>
<div id="el1"></div>
<div id="el2"></div>