css border-left 怎么设置 border 展示为椭圆

通过 border-left 实现左侧边框呈现椭圆效果，核心思路是利用 CSS 的 border-radius（圆角）结合宽高 / 边框宽度的搭配来模拟椭圆，因为单纯的 border-left 本身是矩形边框，无法直接变成椭圆，需要通过元素样式组合来实现。

方法 1：纯边框实现椭圆左侧边框（常用）

这种方式通过给元素设置左侧边框，并利用 border-radius 将边框上下两端做成圆角，形成椭圆 / 半圆的视觉效果：

css

css 复制代码

/* 椭圆左侧边框示例 */
.ellipse-border-left {
  width: 100px;       /* 元素宽度（可根据需求调整） */
  height: 80px;       /* 元素高度（决定椭圆的纵向尺寸） */
  border-left: 10px solid #007bff; /* 左侧边框：宽度+颜色 */
  /* 关键：border-radius 上下设为 50%（椭圆核心），左右设为 0 */
  border-radius: 0 0 50% 50% / 0 0 100% 100%; 
  /* 也可以简写为：border-radius: 0 0 50px 50px; （数值≈边框+元素高度的一半） */
  background: #f5f5f5; /* 背景色，方便看效果 */
}

关键解释 ：border-radius 的 / 前是水平圆角，后是垂直圆角；设置 0 0 50% 50% / 0 0 100% 100% 能让左侧边框的上下两端完全圆弧化，配合边框宽度和元素高度，形成椭圆边框。
效果：左侧会呈现一个椭圆（半圆）的边框，高度由元素 height 决定，粗细由 border-left-width 决定。

方法 2：伪元素实现独立的椭圆左侧边框（更灵活）

如果不想影响原元素的样式，可通过 ::before/::after 伪元素单独做一个椭圆边框，定位到元素左侧：

css

css 复制代码

/* 伪元素实现椭圆左侧边框 */
.box {
  width: 100px;
  height: 80px;
  margin-left: 20px; /* 给椭圆边框留位置 */
  background: #f5f5f5;
  position: relative; /* 相对定位，让伪元素绝对定位 */
}

.box::before {
  content: '';
  position: absolute;
  left: -10px; /* 定位到元素左侧 */
  top: 0;
  bottom: 0;
  width: 10px; /* 椭圆的宽度（对应边框粗细） */
  /* 关键：宽高比例+border-radius: 50% 实现椭圆 */
  border-radius: 50%; /* 50% 圆角直接生成椭圆/圆形 */
  background: #007bff; /* 椭圆填充色（模拟边框） */
}

关键解释 ：伪元素设置 border-radius: 50% 后，只要宽高比例不是 1:1，就会呈现椭圆；这里宽（10px）远小于高（继承父元素 80px），所以是竖向椭圆，刚好作为左侧边框。
优势：不修改原元素的边框属性，椭圆边框独立可控，适合复杂布局。

效果验证

将上述代码复制到 HTML 中，就能看到效果：

html

预览

xml 复制代码

<div class="ellipse-border-left">方法1：纯边框椭圆左侧边框</div>
<br>
<div class="box">方法2：伪元素椭圆左侧边框</div>

总结

单纯 border-left 无法直接变成椭圆，需结合 border-radius 调整圆角，或用伪元素单独制作椭圆；
方法 1 适合简单场景，通过 border-radius 把左侧边框两端圆角拉满形成椭圆；
方法 2 更灵活，用伪元素 +border-radius: 50% 生成独立椭圆，作为左侧边框使用。

核心要点：椭圆的形状由「宽高比例」和 border-radius: 50% 共同决定，调整宽高 / 边框宽度就能改变椭圆的粗细和长短。