You can use ::before
and ::after
pseudo elements to cover (and thus, "hide") parts of the border:
.bordery {
border: 1px solid teal;
padding: 20px;
position: relative;
}
.bordery::after,
.bordery::before {
background-color: white;
content: "";
display: block;
height: 10px;
position: absolute;
width: 10px;
}
.bordery::after {
bottom: -1px;
right: -1px;
}
.bordery::before {
top: -1px;
left: -1px;
}
<div class="bordery">This is just some sample content.</div>