Validation for the radio buttons in my reactive form is working correctly. When the form control is invalid, the red border and label appear as expected. However, after the user makes a selection and the control becomes valid, the green validation border shows up -but the selected radio button looks distorted. The green border becomes much thicker than the red one, and there’s no spacing between the border and the inner selected circle, making it look visually unappealing.

<div class="col-12 col-lg-6">
                <div class="form-check form-check-inline">
                  <input
                    mdbRadio mdbValidate
                    class="form-check-input"
                    type="radio"
                    name="selectedOption"
                    id="optionNo"
                    formControlName="selectedOption"
                    [value]="'false'"

                  />
                  <label class="form-check-label" for="optionNo">Option 1</label>
                </div>

                <div class="form-check form-check-inline">
                  <input
                    mdbRadio mdbValidate
                    class="form-check-input"
                    type="radio"
                    name="selectedOption"
                    id="optionYes"
                    formControlName="selectedOption"
                    [value]="'true'"

                  />
                  <label class="form-check-label" for="optionYes">Option 2</label>
                </div>
              </div>

Question, is it possible to show red border and label for invalid control, but do not change style for valid one? If it is possible, could you please provide an example. Thank you.