html - 如何使用 CSS 圆整一条直线？

Question

我想用 CSS 将直线圆化。但我没有成功。我该怎么做？谢谢。

截图:
- 设计:https://imgur.com/RCuJOVw
- 我的CSS代码:https://imgur.com/ssMLQkl

.steps {
    margin-left: 80px;
    margin-top: 100px;
    display: inline-block;
    position: relative;

    &:before {
       content: '';
       position: absolute;
       top: -130px;
       right: 50px;
       width: 30px;
       height: 1px;
       background-color: #eff0f1;
    }
}

Answer 1

在边框上使用 border-top-right-radius。

div {
  width: 50px;
  height: 100px;
  border-top: 3px solid grey;
  border-right: 3px solid grey;
  border-top-right-radius: 15px;
}

<div></div>