Remove border only from corners (CSS) - css

Question

I want to remove the corners of borders like in
picture.
By now I have tried ::before and ::after pseudo elements but I was only able to remove two of the corners.
.rounded-corner-div{
min-height: 100px;
padding: 10px 20px;
border: 1px #000 solid;
position: relative;
}
.rounded-corner-div::after,
.rounded-corner-div::before {
background-color: white;
content: "";
display: block;
height: 10px;
position: absolute;
width: 10px;
}
.rounded-corner-div::after {
bottom: -1px;
right: -1px;
}
.rounded-corner-div::before {
top: -1px;
left: -1px;
}
<div class="rounded-corner-div"></div>

Answer 1

You can eventually use gradient and background-size:
.rounded-corner-div {
min-height: 100px;
padding: 10px 20px;
position: relative;
background: linear-gradient(to bottom, #000 1px, transparent 1px, transparent calc(100% - 1px), black calc(100% - 1px)) no-repeat, linear-gradient(to left, #000 1px, transparent 1px, transparent calc(100% - 1px), black calc(100% - 1px)) no-repeat;
background-position: center;
background-size: calc(100% - 1em) 100%, 100% calc(100% - 1em);
/* extra for demo */
display:flex;
align-items:center;
justify-content:center;
}
<div class="rounded-corner-div ">
test
</div>
If you still want to use pseudos elements, you can use them to draw the borders:
.rounded-corner-div {
min-height: 100px;
padding: 10px 20px;
position: relative;
}
.rounded-corner-div::after,
.rounded-corner-div::before {
content: "";
position: absolute;
pointer-events: none;
/* to click through anytime */
border: solid 1px;
}
.rounded-corner-div::after {
left: 10px;
right: 10px;
top: 0;
bottom: 0;
border-left: none;
border-right: none;
}
.rounded-corner-div::before {
top: 10px;
bottom: 10px;
left: 0;
right: 0;
border-top: none;
border-bottom: none;
}
<div class="rounded-corner-div"></div>