How to round dash cap in CSS?-CodePudding

Is it possible to round dash cap in border?

Or how to round dash cap in a custom line?

This is what I want to create.

I made that with background image and I can't round dashes.

.dashed-line {
    display: block;
    width: 6px;
    height: 200px;
    background-image: linear-gradient(to bottom, #4b9ed9 60%, transparent 40%);
    background-position: center bottom;
    background-repeat: repeat-y;
    background-size: 6px 30px;
  }

<span ></span>

Thanks.

CodePudding user response：

Use radial-gradient combined with linear-gradient

.dashed-line {
  --s:15px; /* control the space between dashes */

  width: 6px;
  height: 180px;
  background: 
   radial-gradient(circle closest-side,#4b9ed9 98%,#0000) 0 0/100% var(--s),
   linear-gradient(#4b9ed9 50%, #0000 0) 0 calc(var(--s)/2)/100% calc(2*var(--s));
}

.dashed-line-alt {
  --s:15px;

  height: 6px;
  background: 
   radial-gradient(circle closest-side,#4b9ed9 98%,#0000) 0 0/var(--s) 100%,
   linear-gradient(90deg,#4b9ed9 50%, #0000 0) calc(var(--s)/2) 0/calc(2*var(--s)) 100%;
}

<div ></div>
<hr>
<div ></div>

CodePudding user response：

You can use dotted border.

p.dotted {
padding: 5px;
border-style: dotted;
border-width: 5px;
}

<p >A dotted border.</p>

CodePudding user response：

Could this help?

CSS:

.dashed-line {
    display: grid;
    .line {
    margin-top: 5px;
    width: 6px;
    height: 30px;
    background-image: linear-gradient(to bottom, #4b9ed9 60%, #4b9ed9 10%);
    border-radius: 20px;
  }
}

HTML:

  <span >
    <span ></span>
    <span > </span>
    <span ></span>
    <span ></span>
    <span ></span>
    <span ></span>
  </span>