Search code examples
csssvgcss-shapes

How to create curved line with rounded edges?

Hi I need create a line like this image Line rounded

but I don't know how to end rounded line-edge

.line{
  position: absolute;
  width: 55px;
  height: 10px;
  border: solid 12.5px #fff;
  border-color: white transparent transparent transparent;
  border-radius: 50%/100% 100% 0 0;
  transform: rotate(180deg);
  margin-left: 10px;
  margin-top: 50px;}

Can you help me to end the line with redounded form?

bad line

Solution

  • You may add two background layers to create the circles at the edges like below:

    .line {
  --c:20px; /* control the size */
  
  width: 100px;
  margin-top:-100px;
  display:inline-block;
  box-sizing:border-box;
  border: solid var(--c) transparent;
  border-radius:50%;
  border-bottom-color:red;
  background:
    radial-gradient(farthest-side,red 98%,transparent) left  15% bottom 14%,
    radial-gradient(farthest-side,red 98%,transparent) right 15% bottom 14%;
  background-size:var(--c) var(--c);
  background-origin:border-box;
  background-repeat:no-repeat;
}

/* maintain the square ratio */
.line::before {
  content:"";
  display:block;
  padding-top:100%;
}
    <div class="line"></div>
<div class="line" style="--c:30px;width:200px"></div>
<div class="line" style="--c:40px;width:120px"></div>
<div class="line" style="--c:10px;width:150px"></div>