Query
Are there any accessibility drawbacks to removing the outline CSS property and using box-shadow instead to highlight an active input? Does this approach violate WCAG guidelines?
Context
By default, user agents highlight an active element's outline when it is in focus. While customizing this highlighting using the :focus selector works well for rectangular inputs, it can cause issues with rounded inputs where the outline appears as a square. To address this, some developers replace the outline with a box-shadow which matches the shape of the input better but has raised concerns about accessibility.
Illustration
input {
border-radius: 999em;
padding: 10px;
}
.outline:focus {
outline: solid 15px red;
}
.box-shadow:focus {
outline: none;
box-shadow: 0 0 0 15px red;
}<label for="with-outline">Outline</label>
<input name="with-outline" id="with-outline" class="outline">
<hr>
<label for="with-box-shadow">Box Shadow</label>
<input name="with-box-shadow" id="with-box-shadow" class="box-shadow">