如何用CSS实现侧边为半圆形边框的卡片？

完全可以通过CSS实现这个效果，下面是具体的实现方案，基于你提供的代码修改：

实现思路 #

利用CSS伪元素（::before）创建半圆形装饰，通过绝对定位将其放置在卡片侧边，同时调整卡片的圆角和边距，让半圆与卡片视觉上融为一体。

修改后的完整代码 #

CSS部分 #

.wrapper {
  /* 可选：让卡片在容器中居中显示 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.content-card {
  position: relative;
  width: 315px;
  height: 131px;
  background: #FFFFFF;
  box-shadow: 4px 8px 12px rgba(0, 0, 0, 0.12);
  /* 去掉左侧圆角，避免和半圆冲突 */
  border-radius: 0 8px 8px 0;
  /* 给左侧半圆留出位置 */
  margin-left: 40px;
}

/* 创建左侧的半圆形装饰 */
.content-card::before {
  content: '';
  position: absolute;
  /* 向左移动半圆，使其与卡片左侧贴合 */
  left: -40px;
  top: 50%;
  /* 垂直居中 */
  transform: translateY(-50%);
  /* 半圆的直径为80px，宽高设为80px */
  width: 80px;
  height: 80px;
  border-radius: 50%;
  /* 半圆背景色，可按需调整 */
  background: #2563eb;
  /* 添加和卡片一致的阴影，保持视觉统一 */
  box-shadow: 4px 8px 12px rgba(0, 0, 0, 0.12);
}

HTML部分 #

<div class="wrapper">
  <div class="content-card">
    <!-- 卡片内容 -->
  </div>
</div>

自定义调整说明 #

• 若要将半圆放在卡片右侧，只需修改以下几点：
  1. 将.content-card的margin-left改为margin-right，border-radius改为8px 0 0 8px
  2. 将伪元素的left: -40px改为right: -40px
• 调整半圆大小：修改伪元素的width/height，同时同步修改margin和定位数值（比如半圆直径改为60px，对应width/height设为60px，left改为-30px，margin-left改为30px）
• 伪元素的background属性可替换为你需要的颜色或背景图

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