How can i create a <hr> line with a few big dots-CodePudding

I coded this line

<hr style="border-style: dotted; size: 5px; background-color: #EAF6F6;">

How can i create a line like that? :

CodePudding user response：

This is how you can do it. You have to use borders. It is a very handy trick that comes into use a lot. You can not only create dotted lines but all sorts of other ones as well by defining the border for hr tag.

hr {
    width: 20%;
    border-style: dotted none none;
    border-width: 7px;
    border-color: red;
}

<hr>

CodePudding user response：

You have to use border-top or border-bottom as following.

<hr style="background-color: inherit;border-bottom: 5px dotted #d2d2d2;">

CodePudding user response：

Use gradient coloration:

.dots {
  width:200px;
  height:20px;
  margin:auto;
  background:radial-gradient(circle closest-side,#EAF6F6 98%,#0000) 0/calc(100%/5) 100%;
}

<div class="dots"></div>

You can introduce a CSS variable to easily control the number of dots:

.dots {
  --n:5;
  width:200px;
  height:20px;
  margin:20px auto;
  background:radial-gradient(circle closest-side,#EAF6F6 98%,#0000) 0/calc(100%/var(--n)) 100%;
}

<div class="dots"></div>
<div class="dots" style="--n:3"></div>
<div class="dots" style="--n:7"></div>