CODEWITHSUNDEEP
css
Lakshay Khatter
Lakshay Khatter

Reputation: 1

I am trying to make circular dotted line but I am getting square in css

actually I am trying to make a dotted line with CSS I want it in circular form but I am getting it in square

The code I am using is

hr {border-style: none; border-top-style: dotted; border-color: grey; border-width: 6px; width: 5%; }

The result I am getting is

getting result image

The result I want is

actual result picture

can anyone help me with that please.

Upvotes: 0

Views: 810

Answers (3)

symlink
symlink

Reputation: 12208

You have it right in your code. I simplified it a bit by setting border: none to undo the default border of <hr />. Then I set all of the top border's styles at once with border-top: dotted grey 15px:

hr {
  width: 56%;
  border: none;
  border-top: dotted grey 15px;
}
<hr />

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 273100

Use radial-gradient()

.hr {
  height:20px;
  background:radial-gradient(circle closest-side,grey 97%,transparent) 
             0 0/30px 100%; /* 20px + 10px of distance between circles */
}
<div class="hr"></div>

To avoid having partial circles:

.hr {
  height:20px;
  background:radial-gradient(circle closest-side,grey 97%,transparent) 
             0 0/30px 100% round; 
}
<div class="hr"></div>

Upvotes: 1

Sean
Sean

Reputation: 8039

The dotted keyword makes square "dots" in most browsers. You'll need to use a custom border image if you want to achieve the effect using the border property. You could also use a background image.

If you want to achieve a similar effect without an image, one approach would be to use multiple box shadows:

hr {
  border: none;
  width: 1rem;
  height: 1rem;
  background: lightgray;
  border-radius: 1rem;
  box-shadow:
    -4rem 0 lightgray,
    -2rem 0 lightgray,
     2rem 0 lightgray,
     4rem 0 lightgray;
}
<hr>

Upvotes: 1

Related Questions