add border red to checkbox when selected CSS

I have this HTML and I'm trying to add a border 1px solid red to the IMG when the checkbox is clicked. I already add the Hover event but i don't know ho to set the border red when the checkbox is selected.

                <div class="row ">   
                    <div class="col-md-5 col-md-offset-1 col-centered ">
                        <input type="checkbox" id="piega1" class=" servizioSection2 " name="imgSection2"value="PiegaByWellaProfessionals">
                        <label class="piega" for="piega1">
                            <img src="img/piega1.png" for="piega1" alt="" class="img-responsive immaginePiega ">
                        </label>
                        <h1 class="immagineTitoloPiega">PIEGA BY WELLA PROFESSIONALS</h1>
                    </div>
                    <div class="col-md-5  col-centered piege">
                        <input type="checkbox" id="piega2" name="imgSection2" class="piege servizioSection2" value="Piega By System Professionals">
                        <label for="piega2" class="piega ">
                            <img src="img/piega2.png" for="piega2" alt="" class="img-responsive immaginePiega">
                        </label>
                        <h1 class="immagineTitoloPiega">PIEGA BY SYSTEM PROFESSIONALS</h1>
                    </div>
                </div>

this is the CSS

.immaginePiega {-webkit-filter: grayscale(100%);filter: grayscale(100%); border-radius: 45px 0 45px 0; border: 1px solid #cccccc}
.immaginePiega:hover{-webkit-filter: grayscale(0%);filter: grayscale(0%); border-radius: 45px 0 45px 0; border: 3px solid red}
.immaginePiega:active{border:10px solid red;}