仅删除边框（CSS）

Question

我想删除边框的边角，如 图片。

现在我已经尝试::之前和::伪元素后，但我只能够删除两个角落。

.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

最后，您可以使用渐变和背景大小：

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

---

如果你还是想用假点元素，你可以使用它们绘制边界：

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