Html CSS：具有负半径的边框

我第一次遇到一个关于边界的问题

因此，我需要创建没有任何图像的类似边框（如果可能）：

在页面底部也一样

如您所见，有两个边界半径为负（？）的边界。我知道负

边界半径

不起作用，所以如果有人能帮我解决问题，我将不胜感激

---

我已经尝试过这个：，但问题是我无法创建正常的边框-只创建整个块。

您可以查看这个jQuery插件：它还有很多其他边框样式的可能性

---

您还可以查看Lea Verou提供的解决方案。她将负边界半径与css3渐变一起使用：

使用div元素作为包装，并使用div添加元素作为圆角。 您可以尝试在子元素上添加具有边框半径的角：

示例如下：

---

您还可以使用

：before

和

：after

伪元素来创建更干净的html。在回答之前，请确保已经问过相同或类似的问题。我现在看到了你的url，把这个标记为书签后忘记了先在堆栈上搜索，抱歉。然后你可以删除这个答案，并要求提问者在评论中指向该线索。

div {
    width: 100px;
    height: 100px;
    overflow: hidden;
    z-index: 1;
    position: relative;
}

p {
    margin: 0;
    width: 98px;
    height: 98px;
    border: 1px solid red;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}
b.top-right {
    position: absolute;
    z-index: 3;
    background: white;
    top: -5px;
    right: -5px;
    width: 10px;
    height: 10px;
    border: 1px solid red;
    border-radius: 999px;
}

b.top-left {
    position: absolute;
    z-index: 3;
    background: white;
    top: -5px;
    left: -5px;
    width: 10px;
    height: 10px;
    border: 1px solid red;
    border-radius: 999px;
}