<div class="wrapper">
<input type="radio" id="radio_1" name="rd" class="rd">
<label for="radio_1" class="rd_label">
  <img src="http://placehold.jp/300x150.png" class="rd__img">
</label>

<input type="radio" id="radio_2" name="rd" class="rd">
<label for="radio_2" class="rd_label">
  <img src="http://placehold.jp/300x150.png" class="rd__img">
</label>

<input type="radio" id="radio_3" name="rd" class="rd">
<label for="radio_3" class="rd_label">
  <img src="http://placehold.jp/300x150.png" class="rd__img">
</label>
</div>
    .wrapper {
      display: flex;
      width: 1000px;
      height: 1000px;
      flex-direction: row;
      justify-content: space-between;
    }

    .rd_label {

      display: block;
      border: 1px solid black;
      border-radius: 3mm 3mm 15mm 2mm;
      width: 300px;
      height: 300px;
      padding:5px
    }
    .rd__img {border-radius: 3mm}
    .rd {
      display: none;
    }
    .rd:checked + .rd_label {
      border: 1px solid red;
    }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.