탭 선택 css

<div id='c'>
  <div id='a' onclick="showBorder('a')">aa</div>
<div id='b' onclick="showBorder('b')">bb</div>
</div>

      #c { display: flex; }
        #a, #b {     
             width: 300px;
            height: 200px;
           border: 3px solid white;
            box-sizing: border-box;
            position: relative;
        }

        .selected-bottom-white::after {
            content: '';
            position: absolute;
            bottom: -3px;
            left: 0px;
            width: 100%;
            height: 3px;
            background: white;
        }
        .selected-bottom-black::after {
            content: '';
            position: absolute;
            bottom: -3px;
            left: -3px;
            width:   calc(100% + 6px);;
            height: 3px;
            background: black;
        }
        .selected-right::before {
            content: '';
            position: absolute;
            right: -3px;
            width:3px;
            height: 100%;
            background: white;
        }
      .selected-top::before {
            content: '';
            position: absolute;
            top: -3px;
            left: 0;
            width: 100%;
            height: 3px;
            background: white;
        }

        .selected-left::after {
            content: '';
            position: absolute;
            left: -3px;
            width:3px;
            height: 100%;
            background: white;
        }

function showBorder(id) {
    var elements = ['a', 'b'];
    for (var i = 0; i < elements.length; i++) {
        var el = document.getElementById(elements[i]);
        if (elements[i] === id) {
            el.style.border = "3px solid black";
            el.classList.add('selected-bottom-white');
            el.classList.remove('selected-bottom-black');
        } else {
            el.style.border = "3px solid white";
            el.classList.remove('selected-bottom-white');
            el.classList.add('selected-bottom-black');
        }
    }
}