css border 矩形左边一侧半圆

以下是使用CSS实现矩形左边一侧半圆的方法：

/* 定义一个带有半圆的矩形 */
.half-circle {
  width: 100px;
  height: 50px;
 border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  border: 1px solid black;
  position: relative;
}

/* 定义半圆的样式 */
.half-circle:before {
  content: "";
  position: absolute;
  top: 0;
  left: -25px;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  border: 1px solid black;
  border-right: none;
}

解释：

首先，我们定义一个带有半圆的矩形，使用`border-top-right-radius`和`border-bottom-right-radius`属性来定义右侧的圆角，使用`border`属性来定义边框。然后，我们使用`position: relative`来使得半圆的位置相对于矩形进行定位。

接着，我们定义半圆的样式，使用`content: ""`来定义一个空的内容，使用`position: absolute`来使得半圆的位置相对于矩形进行定位，使用`top: 0`和`left: -25px`来使得半圆的位置在矩形的左侧，使用`width: 50px`和`height: 50px`来定义半圆的大小，使用`border-radius: 25px`来定义半圆的圆角，使用`border`属性来定义边框，使用`border-right: none`来去掉右侧的边框。

最后，我们使用`::before`伪元素来将半圆添加到矩形中。