如何仅通过CSS边框属性实现指定自定义形状？

需求描述 #

我想要仅使用CSS实现这样的形状：深灰色矩形，顶部左右两侧为圆角，底部左右各有一个半圆型缺口，底部中间保留白色边框。我知道可以用矩形加同背景色圆圈的方法实现，但希望仅通过修改边框相关属性完成。尝试了两次调整边框和圆角属性都没成功，代码如下：

第一次尝试代码 #

width: 200px;
height: 200px;
background-color: #0B2429;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom: 2px solid #FFF;

第二次尝试代码 #

width: 200px;
height: 200px;
background-color: #0B2429;
border: 3px solid #FFF;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;

实现方案 #

可以通过精准控制边框颜色、圆角属性结合背景裁剪来实现，完全基于边框相关属性调整，代码如下：

.shape {
  width: 200px;
  height: 200px;
  background-color: #0B2429;
  /* 设置顶部圆角 */
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  /* 上下边框为白色，左右边框设为透明 */
  border: 3px solid #FFF;
  border-left-color: transparent;
  border-right-color: transparent;
  /* 底部左右设置大圆角，利用透明边框形成半圆缺口 */
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  /* 确保背景色只填充到内边距区域，不覆盖透明边框 */
  background-clip: padding-box;
}

原理说明 #

1. 先给元素设置统一的白色边框，再将左右边框改为透明，隐藏左右两侧的边框显示；
2. 底部左右设置50%的圆角，结合透明边框与背景裁剪规则，形成半圆型缺口；
3. background-clip: padding-box限制背景色仅填充到内边距区域，避免覆盖透明边框，让缺口效果更精准。

内容的提问来源于stack exchange，提问作者Carlos Salame