How can i fix a bug with my dotted border that only happens on ios and not android?

Issue

I am creating a dotted border for my mobile app, on android the border is displayed correctly but on ios it is displayed as little squares(blocks) instead of dots This vl is the class where is create my border around the form

<form>
<div class="v1">


  <div style="margin-top: 10.5%; " class="hl"></div>

  <ion-card class="secondaryCard" *ngIf="AccountNotEmpty">
  </ion-card>

 </div>

  <ion-grid>
    <ion-row>
      <ion-col>
        <div class="endBorder" style="opacity: 0.9"></div>
      </ion-col>
      <ion-col>
        <div class="endBorder" style="opacity: 0.8"></div>
      </ion-col>
      <ion-col>
        <div class="endBorder" style="opacity: 0.7"></div>
      </ion-col>
      <ion-col>
        <div class="endBorder" style="opacity: 0.6"></div>
      </ion-col>
      <ion-col>
        <div class="endBorder" style="opacity: 0.5"></div>
      </ion-col>
      <ion-col>
        <div class="endBorder" style="opacity: 0.4"></div>
      </ion-col>
      <ion-col>
        <div class="endBorder" style="opacity: 0.3"></div>
      </ion-col>
      <ion-col>
        <div class="endBorder" style="opacity: 0.2"></div>
      </ion-col>
      <ion-col>
        <div class="endBorder" style="opacity: 0.1"></div>
      </ion-col>

    </ion-row>
  </ion-grid>
</div>
</form>

This is the vl class i use to create the border

.v1{
border-color: white !important;
border-left: dotted thick;
border-width: 5px !important;
// border-bottom: dotted ;
height: auto;
//padding-left: 10%;
margin-left: 3%;
position: relative;
}

Solution

Dotted borders can be rendered a bit differently on different browsers. If the border is small, that usually is not even visible, but with a border width of severel pixel, it is. Some render the border as perfect squares, some as circles.

If this is essential for your design and you want a consistent cross-browser solution, you could use the border-image property. So you create an image file with round border elements and use that one for your borders in CSS then. There is a nice explanation here, that shows how to do this.

Answered By - Chrissu