<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.