iOS CSS issue when using top and bottom border on round element

Question

I've run into a CSS bug on iPhones that I hope somebody knows a fix/hack for.

When creating a circular element (border-radius:50%) and you add a bottom-border and a top-border, the bottom border will also be used on the top sides with the exception of the tip.

Example of top-border and bottom-border used together on iOS

Example of top-border and bottom-border used together on Android

Is there a trick to get a nice black rounded border at the top and a nice red rounded border on the bottom of the circle in an iPhone browser. I'm seeing this in both Safari and Google Chrome on the iPhone.

For full transparency, this is the code that I've run here:

<style>
   #circle {
     border-radius:50%;
     background-color:green;
     border-top:1px dotted black;
     border-bottom:1px solid red;
     height:200px;
     width:200px;
   }
</style>
<div id="circle"></div>

Answer 1

This is a know issue for the Safari webkit. You have to create a workaround by yourself. Here is a approach I created and tested on the iPhone via WKWebView:

<div class="circle-wrapper">
    <div class="half-circle"></div>
    <div class="circle"></div>
</div>

.circle {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 100%;
    border: 4px dotted black;
    background-color: lightblue;
    position: absolute;
}

.half-circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 100px;
    border-radius: 100px 100px 0 0;
    border: 4px dotted white;
    background-color: lightblue;
    z-index: 10;
    background-color: #a20000;
    transform-origin: bottom center;
    transform: rotate(180deg);
}

.circle-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

As I told it is a approach for you since dotted borders where shown through the diameter in this example.