Hello how can i create in html and css dotted hr like this on image

dotted hr

CodePudding user response：

For this you have to rely on multiple background and adjust background-clip of each one. For background-clip refer here

You can get the faded dotted/dashed border like this

.container {
  display:inline-block;
  height: 200px;
  width: 200px;
  margin: 20px;
  border-radius:5px;
  border: 3px dotted #fff;
  background:
   linear-gradient(#fff,#fff) padding-box /* Don't extend this to border */,
   linear-gradient(to right, black, #ab5ca4 49%, white) border-box; /*Border-box is not need as it's the default value*/
}
.dashed {
  border: 3px dashed #fff;
}

<div >
</div>

<div >

</div>

CodePudding user response：

maybe this can help

.custom-hr{
  
}

.custom-hr span{
  height:10px;
  width:10px;
  background:#000;
  display:inline-block;
  border-radius:100px;
  opacity:1;
  margin:0 2px;
}

.custom-hr span:nth-child(1){
  opacity: 10;
}

.custom-hr span:nth-child(2){
  opacity: 0.8;
  height:9px;
  width:9px;
}

.custom-hr span:nth-child(3){
  opacity:0.5;
  height:8px;
  width:8px;
}

.custom-hr span:nth-child(4){
  opacity:0.2;
  height:7px;
  width:7px;
}

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