Skipping value in CSS box model value definitions - css

Question

TLDR;
I have a CSS input form which consists of 4 number inputs for each direction and it sets margins. When I submit auto, auto margins make element positioned in center horizontally. When I give 0px, It sets it to 0px which is really a value of "0px", and it doesn't provide an auto like untouched property. Is this possible?
I wondered if there is something like this: For example I have a CSS definition like this:
border-width: 4px;
and on some case I want to change the width of only left and right borders:
border-left-width: 2px;
border-right-width: 2px;
Instead of writing this, I can't write these:
border-width: initial 2px;
border-width: inherit 2px;
border-width: unset 2px;
because they seem to be invalid values in chrome developer tools.
Is there anything else I can use to do this?
function toggleClasses(){
document.querySelectorAll(".div").forEach(function(elem){
elem.classList.toggle("toggled");
});
}
.div {
width: 100px;
height: 100px;
margin: 20px;
display: inline-block;
background: #eee;
border-color: #333;
border-width: 4px;
border-style: solid;
}
.div.div-1.toggled {
border-width: initial 2px;
margin: initial 10px;
}
.div.div-2.toggled {
border-width: inherit 2px;
margin: inherit 10px;
}
.div.div-3.toggled {
border-width: unset 2px;
margin: unset 10px;
}
<div class="div div-1"></div>
<div class="div div-2"></div>
<div class="div div-3"></div>
<input type="button" onclick="toggleClasses();" value="Togggle" />