fbpx

Draw half and quarter circle with CSS

Many times we want to draw a half-circle or quarter circle in our design. It can be achieved with images, but for a few, it is difficult to create an image. It is easy to create any type of circle using CSS.

Full half or quarter circle using CSS

Full-Circle:

First we will start with full circle

.full-circle {
  width: 300px;
  height: 300px;
  border-radius:50%;
  background-color: rgba(196, 196, 196, 1);
}

Even full circle can be achieve like this also

.full-circle {
width: 300px;
height: 300px;
border-radius:150px 150px 150px 150px; /* half of heght*/
background-color: rgba(196, 196, 196, 1);
}

Semi-Circle:

If you want to create bottom or top semi-circle then your width is double of height.

.top-semi-circle {
  width: 300px;
  height: 150px; /* half of width*/
  border-radius:150px 150px 0px 0px;
  background-color: rgba(196, 196, 196, 1);
}
.bottom-semi-circle {
width: 300px;
height: 150px; /*half of width*/
border-radius:0 0 150px 150px;
background-color: rgba(196, 196, 196, 1);
}

Now suppose you want to create left or right semi-circle in that case your height will be double of width.

.left-semi-circle {
width: 150px; /* half of width*/
height: 300px; 
border-radius: 150px 0 0 150px;
background-color: rgba(196, 196, 196, 1);
}
.right-semi-circle {
width: 150px; /* half of width*/
height: 300px; 
border-radius: 0 150px 150px 0;
background-color: rgba(196, 196, 196, 1);
}

Quarter-Circle:

If we want to create a quarter circle in that case height and width should be equal:

.top-left-quarter-circle {
  width: 300px;
  height: 300px;
  border-radius: 300px 0 0 0;
  background-color: rgba(196, 196, 196, 1);
}
.top-right-quarter-circle {
  width: 300px;
  height: 300px;
  border-radius: 0 300px 0 0;
  background-color: rgba(196, 196, 196, 1);
}
.bottom-right-quarter-circle {
  width: 300px;
  height: 300px;
  border-radius: 0 0 300px 0px;
  background-color: rgba(196, 196, 196, 1);
}
.bottom-left-quarter-circle {
  width: 300px;
  height: 300px;
  border-radius: 0 0 0 300px;
  background-color: rgba(196, 196, 196, 1);
}

Code:

Create Circles using CSS