如何实现Div右侧半边框效果，且左侧图片区域无边框？

问题背景 #

需要实现右侧半部分带有边框、左侧背景区域无框的布局，现有HTML结构如下：

<div class="module-box carilion-proud-logo-section">
    <div class="left-section">
        <svg>Carilion Proud Logo svg</svg>
    </div>
    <div class="right-section">
        <a href="">Visit the hub</a>
    </div>
</div>

现有CSS中，父容器同时设置了顶部、右侧、底部边框，导致左侧区域也会显示上下边框，不符合需求。

解决方案：调整边框归属，分离左右区域样式 #

修改后的完整CSS代码如下：

.carilion-proud-logo-section {
  margin: 0 30px 30px 30px !important;
  display: flex;
  /* 仅保留父容器的右侧边框，移除上下边框 */
  border-right: 1px solid #e0e0e0;
  border-radius: 5px;
  overflow: hidden; /* 确保子元素的裁剪和圆角不超出父容器 */
  
  .left-section {
    flex: 1; /* 让左右区域平分父容器宽度，替代原width:100%避免布局错乱 */
    text-align: center;
    padding: 39px 0;
    background: url("../../../../../../assets/images/carilion-proud-blue.png") no-repeat center;
    background-size: cover;
    clip-path: ellipse(100% 150% at 0% 50%);
    border-radius: 5px;
  }
  
  .right-section {
    flex: 1;
    text-align: center;
    align-self: center;
    padding: 39px 0; /* 恢复内边距保证内容垂直居中 */
    /* 给右侧区域添加上下边框 */
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    /* 设置右上角、右下角圆角，匹配整体风格 */
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
  }
}

关键修改说明 #

• 父容器仅保留border-right，避免左侧区域出现多余的上下边框
• 将左右区域的width:100%改为flex:1，确保两个区域平分父容器宽度，解决原布局的挤压问题
• 右侧区域独立添加上下边框，并设置对应圆角，保证整体边框的完整性和风格统一
• 父容器添加overflow:hidden，确保左侧区域的椭圆裁剪和圆角不会超出容器范围

备选方案：使用伪元素构建边框（更精细控制） #

如果需要对边框位置做更精准的调整，可以通过伪元素实现：

.carilion-proud-logo-section {
  margin: 0 30px 30px 30px !important;
  display: flex;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  
  .left-section {
    flex: 1;
    text-align: center;
    padding: 39px 0;
    background: url("../../../../../../assets/images/carilion-proud-blue.png") no-repeat center;
    background-size: cover;
    clip-path: ellipse(100% 150% at 0% 50%);
  }
  
  .right-section {
    flex: 1;
    text-align: center;
    align-self: center;
    padding: 39px 0;
    position: relative;
    
    /* 顶部边框 */
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 1px;
      background-color: #e0e0e0;
    }
    /* 底部边框 */
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1px;
      background-color: #e0e0e0;
    }
    /* 右侧边框 */
    &::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 1px;
      height: 100%;
      background-color: #e0e0e0;
    }
  }
}

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