Putting css borders around radio buttons

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

I know this is four years old, but I came up with a nice solution using CSS Pseudo elements.

My requirement was to highlight an unchecked checkbox, or radio button in validation.

<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%;
}