CSS Show Hidden Border Side

Experimenting with CSS border sides

by Aziz Natour

HTML

<div>ALL YOUR BORDERS ARE BELONG TO US</div>

CSS

/* ================== 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 by setting width to zero */
}

/* restoring borders */

div {
    border-right: inherit;      /* attempt 1 - make border inherit previous properties */
    border-right: initial;      /* attempt 2 - resest border to initial state */
    border-left-width: inherit; /* attempt 3 - inherit the border width */
    border-left-width: initial; /* attempt 4 - reset border width to initial state */
}