Equal spaces between CSS border dots?

Question

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...

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>

Answer 1

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