Как мне округлить прямую линию с помощью 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-radius для округления четырех ангелов элемента требуется четыре числа

border-radius: 5px 10px 15px 20px;

сначала для верхнего левого, второго для верхнего правого, третьего правого нижнего, четвертого левого нижнего используйте% для большей кривой линии.

div{
  border-radius:5px 10px 15px 20%;
  width:300px;
  height:80px;
  border:3px solid #666;
}

<div></div>

Answer 2

Используйте 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>