Puedes usar un `div` para cada cuarto de círculo, algo parecido a esto: <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css --> .cuarto { position absolute; width:100px; height:100px; float:left; } #cuarto1{ background-color:blue; border-radius: 100% 0 0 0; } #cuarto2{ background-color:red; border-radius: 0 100% 0 0; } #cuarto3{ background-color:green; border-radius: 0 0 0 100%; clear:both; } #cuarto4{ background-color:yellow; border-radius: 0 0 100px 0; } <!-- language: lang-html --> <div id="cuarto1" class="cuarto"></div> <div id="cuarto2" class="cuarto"></div> <div id="cuarto3" class="cuarto"></div> <div id="cuarto4" class="cuarto"></div> <!-- end snippet -->