Outline is not correctly rounded on Mobile CSS

In this website, I've created a div with a 50% border radius and an outline to make it a circle. It displays correctly on desktop browsers such as Chrome and Firefox, but is still a square on mobile Safari. Is there any way to fix this? Thanks for any help.

Desktop view:

Mobile View:

<div class="circle" bind:this={circle.element}>
    <div class="dot" bind:this={dots[0].element} on:pointerdown={() => dots[0].pressed = true} ></div>
    <div class="dot" bind:this={dots[1].element} on:pointerdown={() => dots[1].pressed = true} ></div>
</div>

.circle {
    height: var(--circleDiameter);
    width: var(--circleDiameter);
    outline: var(--borderRadius) solid var(--tertiary);
    outline-offset: calc(var(--borderRadius) * -0.5);
    border-radius: 50%;
    position: relative;
    margin: calc(var(--borderRadius) /2 + var(--dotDiameter) / 2);
}

.dot {
    height: var(--dotDiameter);
    width: var(--dotDiameter);
    border: var(--borderRadius) solid var(--theme);
    border-radius: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    background-color: var(--secondary);
}

.circle, .dot {
    touch-action: none
}