CSS toggle button

HTML

<input id="F" type="radio" name="Gender" value="F" checked="checked" />
<label for="F">Woman</label>
<input id="M" type="radio" name="Gender" value="M" />
<label for="M">Man</label>

CSS

body{
    padding:20px;
    font-face:arial;
    font-size:14px;
    }
input[type="radio"]+label{
    border:1px solid gray;
    padding:4px 10px;
    background:silver;
    -webkit-border-radius:5px;
        -moz-border-radius:5px;
             border-radius:5px;
    }
#M+label{
    -webkit-border-top-left-radius: 0;
    -webkit-border-bottom-left-radius: 0;
       -moz-border-radius-topleft: 0;
       -moz-border-radius-bottomleft: 0;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
    }
#F+label{
    -webkit-border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 0;
       -moz-border-radius-topright: 0;
       -moz-border-radius-bottomright: 0;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
    border-right:0;
    }
input[type="radio"]{
    display:none;
    }
input[type="radio"]+label{
        background-color: #888;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#888));
        background-image: -webkit-linear-gradient(top, #fff, #888);
        background-image:    -moz-linear-gradient(top, #fff, #888);
        background-image:     -ms-linear-gradient(top, #fff, #888);
        background-image:      -o-linear-gradient(top, #fff, #888);
        background-image:         linear-gradient(to bottom, #fff, #888);
    }
input[type="radio"]:checked+label{
    background-color:#fff;
    background-image:none;
    }