Css Border Stroke Line Cap Rounded

I have a css loader with infinite spin animation, I want the border line cap rounded, Is there any trick to get the border stroke line cap rounded? I tried stroke-linecap: round; b

Solution 1:

You can do it with some background applied to a pseudo element:

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  position:relative;
}
.loader::before {
  content:"";
  position:absolute;
  width:100%;
  top:0;
  height:20px;
  --rad:radial-gradient(circle 8px,#3498db99%,transparent 100%);
  background:
    var(--rad) left  -14px top 0,
    var(--rad) right -14px top 0;
  background-size:200%100%;
}
@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

<divclass="loader"></div>

Related question to get a different idea: CSS curved line with rounded