suberg

Что-то подобное требуется?

https://codepen.io/suberg/pen/XWraWeN

background-size: contain;
У вас cover поэтому обрезается.

Не нужно делать из дива чекбокс, нужно скрыть системные чекбоксы, а при выборе чекбокса, соответственно, добавлять бордер, к примеру так:

<label class="label">
    <input class="input" name="type" type="checbox">
    <div>...</div>
</label>

.input {
  display: none;
}

.input:checked + div {
  border: ...
}

vertical-align: top для .content
Для инлайн-блоков всегда нужно указывать vertical-align

Поставь для .container width: 100% чтобы ширина равнялась ширине родителя.

Подправленный вариант: https://codepen.io/suberg/pen/RMvvbj
Круг лучше делать используя свойство background-clip: content-box и задать padding(для отступов по краям) тогда он будет по центру и при изменении размеров инпута.
Не понятно, почему некастомный инпут не скрывается полностью(display: none), а перемещается чуть ниже.
Недавно верстал похожий инпут, может быть полезным: https://codepen.io/suberg/pen/eMxbyo