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