I just want to give an element a dotted/dashed border with each dot/dash being evenly spaced but the first and last dots are way too close. I have tried changing the border thickness but it does not make any difference. I attached a picture and circled the problem area.
CSS:
.currentTurn {
outline: 0.3rem dashed red;
outline-offset: 0.2rem;
}