我期待实现与CSS的元素在这些方面：圆边
这是我所得到的最接近（需要在边界）：
div {
width: 120px;
height: 100px;
margin: 25px auto;
border: 1px solid #000;
border-top-left-radius: 200px 300%;
border-bottom-left-radius: 200px 300%;
border-top-right-radius: 200px 300%;
border-bottom-right-radius: 200px 300%;
}<div></div>关于如何锐化边缘的任何建议？宽度需要变化。
你可以做到这一点与伪元素，这样，它会扩展到什么都大小，你的主要元素
更新
typ2上设置有半径相等的左/右弯曲如果要用颜色，图像或动态可伸缩高度填充这些边框，则需要额外的内部元素。
.typ1 div {
position: relative;
display: inline-block;
width: 120px;
height: 100px;
margin: 0 30px;
overflow: hidden;
}
.typ1 div + div {
width: 200px;
height: 100px;
}
.typ1 div::before,
.typ1 div::after {
left: 0;
top: -10%;
width: 100%;
height: 120%;
border-radius: 100%;
border: 1px solid #000;
}
.typ1 div::after {
left: 22%;
top: 0;
width: 56%;
height: 100%;
border-radius: 0;
border-width: 1px 0;
}
.typ2 div {
position: relative;
display: inline-block;
width: 74px;
height: 100px;
margin: 5px 52px;
border: 1px solid #000;
border-width: 1px 0;
}
.typ2 div + div {
width: 156px;
}
.typ2 div::before,
.typ2 div::after {
left: -24px;
top: -25%;
width: 188px;
height: 150%;
border-radius: 100%;
border: 1px solid transparent;
border-left: 1px solid #000;
}
.typ2 div::after {
left: auto;
right: -24px;
border-left: none;
border-right: 1px solid #000;
}
/* general styling */
div::before, div::after {
content: '';
position: absolute;
box-sizing: border-box;
}<div class="typ1">
<div></div>
<div></div>
</div>
<div class="typ2">
<div></div>
<div></div>
</div>如果你知道你想要的形状的大小，你可以使用wrapper div和overflow：hidden来解决这个问题。
我使用flexbox居中，但您可以使用其他方式垂直居中。
.wrapper {
display: flex;
align-items: center;
height: 100px;
overflow: hidden;
}
.circle {
width: 120px;
height: 120px;
margin: 25px auto;
background-color: black;
border-radius: 100%;
}<div class="wrapper">
<div class="circle"></div>
</div>你可以做这样的事情与定位和两个子元素：
.circle {
position: relative;
width: 100px;
height: 100px;
margin: 25px auto;
border-radius: 50%;
background: #000;
}
.circle > .inner-top,
.circle > .inner-bottom {
position: absolute;
left: 0;
width: 100px;
height: 25px;
background: #fff;
}
.circle > .inner-top {
top: -17px;
}
.circle > .inner-bottom {
bottom: -17px;
}<div class="circle">
<div class="inner-top"></div>
<div class="inner-bottom"></div>
</div>调整top和的值按照您的意愿设置inner divs的属性。
请仔细阅读并在我的答案发表评论，让我知道，如果事情是不明确或缺少。如果你能接受最能帮助你的答案，那也将是一件好事。 – LGSon