CSS3 Circles

by Matt Lambert

HTML

<p class="full-circle"></p>

<p class="circle-border"></p>

<p class="transparent-circle"></p>

<p class="half-circle"></p>

<p class="quarter-circle"></p>

CSS

.full-circle {
    background-color:#c06;
    height:150px;
    width:150px;
    -webkit-border-radius:75px;
    -moz-border-radius:75px;
}

.circle-border {
    background-color:#c06;
    border: 3px solid #000;
    height:150px;
    width:150px;
    -webkit-border-radius:75px;
    -moz-border-radius:75px;
}

.transparent-circle {
    background-color: rgba(204, 0, 102, 0);
    border: 3px solid #000;
    height:150px;
    width:150px;
    -webkit-border-radius:75px;
    -moz-border-radius:75px;
}

.half-circle {
    background-color:#c06;
    height:150px;
    width: 75px;
    -moz-border-radius: 150px 0 0 150px;
    border-radius: 150px 0 0 150px;
}

.quarter-circle {
    background-color:#c06;
    height:150px;
    width: 150px;
    -moz-border-radius: 150px 0 0 0;
    border-radius: 150px 0 0 0;
}