html - How to make a hidden border side inherit border properties in CSS -

i came across unusual issue dynamic borders in css. trying "restore" / show side of border has been disabled either setting width 0 border-left-width:0; or using border-left:none;

the problem don't want repeat same border properties since should adaptive dynamic solution hidden border should inherit element's set border.

example code: jsfiddle

/* ================== chic ==================  */    body, html {      margin: 0;      padding: 0;      font-family:verdana, sans-serif;      height: 100%;      text-align: center;font-weight: bold;      background:#62726b;      color:#abd4b1;  }    div {      padding:50px;      position: absolute;      left:0;      right:0;      margin: 0 auto;      width:50%;      top:50%;      transform:translatey(-50%);  }    /* ============= setting border =============  */    div {      border:5px dashed #abd4b1;      border-right:none;   /* hide right border */      border-left-width:0; /* hide left border setting width 0 */  }    /* restoring borders */    div {      border-right: inherit;      /* attempt 1 - make border inherit previous properties */      border-right: initial;      /* attempt 2 - resest border initial state */      border-left-width: inherit; /* attempt 3 - inherit border width */      border-left-width: initial; /* attempt 4 - reset border width initial state */  }

<div>all borders belong us</div>

observation 1: border side not inherit "parent" border

observation 2: using initial resets border browser default (i guess that's logical happen)

so question can hidden/disabled border side shown using pure css without repeating border property twice?

so question can hidden/disabled border side shown using pure css without repeating border property twice?

i suspect real question is, given comments,

interesting, class toggle trick, there way simulate css override instead of class?

... answer is, no, because that's not how cascade works. element can have 1 value property @ given time. either element has border, or doesn't, , determined resolving all border declarations match element , figuring out one of matching declarations wins.

inherit doesn't work because there no parent border inherit from. (technically, there is, it's it's set initial value of medium none currentcolor, , that's what's being inherited.)

initial doesn't work because, again, initial values of border-width , border-style medium , none respectively — , 1 of them disables border; other sets arbitrary non-zero width. (also, this has nothing browser defaults.)

the way can toggle between multiple possible values css property declaring each value in 1 of multiple possible class names assign same element:

div {     border: 5px dashed #abd4b1; }  div.norightborder {     border-right-style: none; /* hide right border */ }  div.noleftborder {     border-left-width: 0; /* hide left border setting width 0 */ } 

... also makes use of overriding rules, except intended. first rule guaranteed match element long div; latter 2 rules match when class names present, , override first virtue of being more specific, first rule , values specified shorthand declaration untouched , restoring them matter of omitting class names, or @ least removing them after fact.