CSS border dotted

[nikostzounakos]

Hello!

I am trying to solve a situation somehow, but it’s very difficult to produce the result that I want.

I have an HTML Table and I want each tr to be separated with a border line in dots.
The border-style: dotted produce this result, but the dots are very close to each other.

Another solution is to ass a div and style it something like that:

.dotted-gradient {
  background-image: linear-gradient(to right, #333 40%, rgba(255, 255, 255, 0) 20%);
  background-position: top;
  background-size: 3px 1px;
  background-repeat: repeat-x;
}

The thing the second solution is that I have to add this div in all td in each tr and and somehow make it in the same line as the table will have
border-collapse: collapse

I am not sure if this is possible with another way, but it’s very difficult to make the space of the dots as you like it and not make them collapse on each other.

Maybe you know another solution?

[PaulOB]

@nikostzounakos

.dotted-gradient {
  background-image: linear-gradient(to right, #333 40%, rgba(255, 255, 255, 0) 20%);
  background-position: top;
  background-size: 3px 1px;
  background-repeat: repeat-x;
}

I think I must have misunderstood the requirements as you could apply the gradient to the tr anyway.

e.g.

If that’s not what you meant then please fork the codepen and show us what you are working with so we can refine a solution

[nikostzounakos]

Hey PaulOB, that’s correct my bad about the element, we can put it in tr and it will appear correctly!
After long hours on the desk, could not think clearly

The other part that I have asked, is how we can make these dots with bigger spaces. Or if there is another totally different way to to do this!

Thank you very much!

[PaulOB]

@nikostzounakos

e can make these dots with bigger spaces.

If you change the background-size the space will get further apart.

e.g.

background-size: 10px 1px;

If you increase the 1px they will get thicker also.

You can also play around with the percentages in the linear gradient to change the solid and transparent amounts to what suits you best

[ladans37]

Or if you use the webkit-mask-size property, you can also achieve the circle sizing, as I did here for my calendar.

.calendarholes {
  width: 279px;
  height: 53px;
  position: absolute;
  left: 5px;
  top: 5px;
  -webkit-mask-image: radial-gradient(
    circle farthest-side at center,
    transparent 10%,
    white 10%
  );
  -webkit-mask-size: 46px 91px;
  -webkit-mask-repeat: repeat-x;
  -webkit-mask-position: bottom right;

  mask-image: radial-gradient(
    circle farthest-side at center,
    transparent 10%,
    white 10%
  );
  mask-size: 46px 91px;
  mask-repeat: repeat-x;
  mask-position: bottom right;
  background-image: url(https://i.ibb.co/TtFdD2Q/Incomplete-Palatable-Bluetickcoonhound-mobile.gif);
  background-repeat: no-repeat;
  background-position: center;
  z-index: -1;
  background-clip: padding-box;
}

[nikostzounakos]

Thank you both for your answers!!

Totally helpful!