CODEWITHSUNDEEP
htmlcss
Sara Ree
Sara Ree

Reputation: 3543

Equal spaces between CSS border dots?

I have a CSS code which creates a simple dotted border here:

border: 5px dotted #ff2100

Now the problem is at the very top where those two last dots are too close to each other...

enter image description here

What if I want equal spaces between all of the dots... Please help...

Edit: I need it only on chrome and Here is the whole CSS (border: 5px dotted #ff2100 is at the very end...)

html {
overflow: hidden; 
  width: 1470px;
  height: 450px;
  margin-top: -3px;
  margin-left: 5px;
}
.row {
  display: flex;
}

.column {
  flex: 50%;
}

.profile {
  padding: 0px;
  margin: 100px 70px 0px 0px;
  width: 50%;
  height: 25px;
  box-sizing: border-box;
  color:#161b7a;
}

.profile .name {

  margin-right: -260px;
  font-family: "Helvetica";
  font-weight: 600;
  src: url(helveticaneue-ultrathin.woff);
  float: right;
  width: 200px;
  height: 50px;
}

.profile .job {


  margin-right: -260px;
  margin-top: 25px;
  font-family: "Helvetica";
  font-weight: 100;
  font-size: 14px;
  color: #b69cd1;
  src: url(helveticaneue-ultrathin.woff);
  float: right;
  width: 200px;
  height: 50px;
}


.profile .count {
  float: right;
  margin-right: 60px;
  margin-top: -2px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 100;
  src: url(helveticaneue-ultrathin.woff);
  color: #E6E0EC;
  font-size: 21px;
  min-width: 76px;
}

.profile img.profilePic {
  position: absolute;
  margin: -50px 70px 50px 50px;
  background: #2f293d;
  border: 4px solid #2f293d;
  padding: 1px;
  border-radius: 50%;
  box-shadow: .2rem .2rem 1rem rgba(0, 0, 0, .5);
}

.profile img.profileDia {
  position: absolute;
  margin: -7px 70px 50px 560px;
  width: 2.3%;
  height: auto;
}




.points {
  position: absolute;
  margin: -2px 100px 100px 490px;
  float: right;
  font-family: "Verdana";
  font-weight: 800;
  src: url(helveticaneue-ultrathin.woff);
  color: #0047ba;
  font-size: 18px;
}

.level {
  position: absolute;
  margin: 25px 100px 100px 135px;
  float: right;
  font-family: "Helvetica";
  font-weight: 800;
  src: url(helveticaneue-ultrathin.woff);
  color: #ed0909;
  font-size: 20px;

  display: block;
    height: 40px;
    width: 40px;
    line-height: 40px;

    -moz-border-radius: 30px; /* or 50% */
    border-radius: 30px; /* or 50% */

    background-color: #2c094f;
    color: white;
    text-align: center;
    font-size: 1.3em;
}



.profile img.profilePic.custom-borderA {
   border: 5px dotted #ff2100

}

HTML

<div class="row">
  <div class="column">
    <div class="profiles"></div>
  </div>
  <div class="column">
    <div class="profiles"></div>
  </div>
</div>

 <link rel="stylesheet" href="Style.css">
<script src="Script.js"></script>

Upvotes: 5

Views: 578

Answers (3)

Mr Lister
Mr Lister

Reputation: 46579

Disclaimer: this solution seems to work only under some circumstances (OS, Chrome version etc). Use at your own peril.

What you need to do is to round the number of red dots to a whole number.

With a 150x150 picture, the circumference is 486.95 pixels, which cannot fit a whole number of 5px dots. One solution would have been to use 4.9688px for a border-width, but that won't work; the browser rounds the border width to an integer.
So we'll have to resort to a little trickery to make it fit. We'll make the image bigger, give it a border width in whole pixels and then scale the whole thing down to its original size.

I'm sorry I can't use your source, since your source doesn't contain the image, but I hope you can work with this.

.profile {
  width:160px; height:160px;
  overflow:hidden;
}
.profile img {
  vertical-align:top;
  background:#2F293D;
  /* multiply the size by 32 */
  width:calc(150px * 32); height:calc(150px * 32);
  border:calc((5px * 32) - 1px) dotted #FF2100;
  border-radius:50%;
  /* then scale back by the same factor */
  transform:scale(calc(1 / 32));
  transform-origin:0 0;
}
<div class="profile">
 <img src="https://i.sstatic.net/W2IqJ.jpg" alt="photo">
</div>

For comparison, here is a snippet without the trickery, that demonstrates the uneven positioning of the dots.

.profile {
  width:160px; height:160px;
  overflow:hidden;
}
.profile img {
  vertical-align:top;
  background:#2F293D;
  border:5px dotted #FF2100;
  border-radius:50%;
}
<div class="profile">
 <img src="https://i.sstatic.net/W2IqJ.jpg" alt="photo">
</div>

Note that I had to put a container around the image with overflow:hidden, otherwise the browser would still think the image was as large as its width and height and would reserve space accordingly.

Upvotes: 2

errorau
errorau

Reputation: 2334

You can't fix this issue with pure css here. You can use a background image or a border-image that does the trick.

Upvotes: 2

Charu Maheshwari
Charu Maheshwari

Reputation: 1643

One solution to your problem would be to use "Border-image". Using this css property you can apply a border-image rather than the border direct and would get rid of the problem of mixing dots. For details you can refer "https://css-tricks.com/almanac/properties/b/border-image/".

Upvotes: 2

Related Questions