main.css

div {
  border: 20px solid #000; /* this is short hand for setting
                            the border's width, its type, and color */
  display: inline-block; /* a way of positioning elements */
  min-width: 20em; /* the two min styles make the shape */
  min-height: 25em; /* of the divs oblong*/
  border-radius: 50%; /* this makes the normally square div round */
  border-left-color: transparent; /* these remove the color from the left side */
  border-right-color: transparent; /* the right side */
  border-bottom-color: transparent; /* and the bottom of the circle */
}

#red {
  border-top-color: #f00;
}

#orange {
  border-top-color: #ffa500;
}

#yellow {
  border-top-color: #ff0
}

#green {
  border-top-color: #00bc3f
}

#blue {
  border-top-color: #06f
}

#indigo {
  border-top-color: #8a2be2
}

#violet {
  border-top-color: #d300c9
}