Multi-colored Circle

In this example below you will see how to do a Multi-colored Circle with some HTML / CSS and Javascript

This awesome code was written by sfavorite, you can see more from this user in the personal repository.
You can find the original code on
Copyright sfavorite ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>Multi-colored Circle</title>
      <link rel="stylesheet" href="css/style.css">



  <div id="circle-container">
   <div class="quarter top-left"></div>
   <div class="quarter top-right"></div>
   <div class="quarter bottom-left"></div>
   <div class="quarter bottom-right"></div>



/*Downloaded from */
#circle-container {
   width: 100px;
   height: 100px

.quarter {
   width: 50px;
   height: 50px

.top-left {
   border-top-left-radius: 50px;
   background: #09f;
   float: left

.top-right {
   border-top-right-radius: 50px;
   background: #666;
   float: right

.bottom-left {
   border-bottom-left-radius: 50px;
   background: #aaa;
   float: left

.bottom-right {
   border-bottom-right-radius: 50px;
   background: #333;
   float: right