[html]
<div id="raz">
<div><span>CSS</span>1 вкладка</div>
<div><span>HTML</span>2 вкладка</div>
</div>

<style>
#raz { /* корпус */
position: relative;
height: 250px;
border-top: 30px solid #fff;
}
#raz > div { /* вкладка */
position: absolute;
z-index: 1;
height: 100%;
width: 100%;
visibility: collapse;
transition: 0s 9999999s;
box-sizing: border-box;
background: #ddd2b2;
padding: 5px;
}
#raz > div:before { /* рамка вкладки */
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: #808080 solid 1px;
border-top: none;
}
#raz > div:hover, #raz > div:nth-of-type(1) {
visibility: visible;
transition: 0s;
}
#raz:hover > div:not(:hover) {
visibility: hidden;
transition: 0s;
}
#raz > div > span { /* кнопка */
position: absolute;
top: -30px;
line-height: 30px;
height: 30px;
width: 25%; /* 4 вкладки, а значит 100/4 */
text-align: center;
box-sizing: border-box;
border: 1px solid rgb(128,128,128);
border-left-color: rgba(0,0,0,0);
visibility: visible;
transition: 0s 9999999s;
cursor: pointer;
}
#raz > div:nth-of-type(1) > span {left: 0; border-left-color: rgb(128,128,128);}
#raz > div:nth-of-type(2) > span {left: 75%;}
#raz > div:hover > span, #raz > div:nth-of-type(1) > span {
border-bottom-color: rgba(0,0,0,0);
transition: 0s;
}
#raz:hover > div:not(:hover) > span {
border-bottom-color: rgba(128,128,128,.99);
transition: 0s;
}
#raz > div:not(:nth-of-type(1)):not(:hover):after { /* появляется нижняя граница у первой кнопки */
content: "";
left: 0;
position: absolute;
top: -1px;
width: 25%;
border-top: 1px solid rgb(128,128,128);
}
</style>
[/html]