Poner bordes CSS alrededor de los botones de radio

Solución:

input[type=radio]{
    outline: 1px solid red
}

Sé que esto tiene cuatro años, pero se me ocurrió una buena solución usando CSS Pseudo elementos.

Mi requisito era resaltar una casilla de verificación sin marcar o un botón de opción en la validación.

<input type="radio" class="required" name="radio1"/>

/* Radio button and Checkbox .required needs an after to show */
input[type=radio].required::after, input[type=checkbox].required::after {
    display: block;
    width: 100%;
    height: 100%;
    background: transparent;
    content: '';
    border: 2px solid red !important;
    box-sizing: border-box;
}
/* Radio buttons are round, so add 100% border radius. */
input[type=radio].required::after {
     border-radius:100%;
}

Puede lograr envolviendo cada elemento de entrada con la etiqueta div y darle un borde y un flotador a la izquierda … así:

<div style="border:1px solid red;float:left">
   <input type="radio".. />
</div>
No, I do not waive confidentiality

---

---

Utiliza Nuestro Buscador