Rand nur von Ecken entfernen (CSS)

Question

Ich möchte die Ecken von Rändern wie in Bild entfernen.

Inzwischen habe ich :: vor und :: nach Pseudo-Elementen versucht, aber ich konnte nur zwei der Ecken entfernen.

.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

können Sie verwenden schließlich Steigung und Hintergrund-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>

---

Wenn Sie noch pseudos Elemente verwenden, können Sie benutze sie die Grenzen zu ziehen:

.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>