Draw half and quarter circle with CSS

Draw half and quarter circle with CSS

Many times we want to draw a semi/half-circle or quarter circle or quarter circle with css 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

border-radius: 15px 50px 150px 150px; (first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner):

border-radius

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

Top Semi Circle
Top Semi Circle
  1. To create top-semi-circle, height should be half of width.
  2. top-left corner and top-right corner of border-radius should be half of width.
  3. bottom-left corner and bottom-right corner of border-radius should be 0
.top-semi-circle {
  width: 300px;
  height: 150px; /* half of width*/
  border-radius:150px 150px 0px 0px;
  background-color: rgba(196, 196, 196, 1);
}svn unable to create pristine install stream

Bottom Semi Circle

Bottom Semi Circle
Bottom Semi Circle
  1. To create bottom-semi-circle, height should be half of width.
  2. top-left corner and top-right corner of border-radius should be 0.
  3. bottom-left corner and bottom-right corner of border-radius should be half of width
.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

Left Semi Circle
Left Semi circle
  1. To create left-semi-circle, height should be double of width.
  2. top-left corner and bottom-left corner of border-radius should be equal to width.
  3. top-right corner and bottom-right corner of border-radius should be 0.
.left-semi-circle {
width: 150px; /* half of width*/
height: 300px; 
border-radius: 150px 0 0 150px;
background-color: rgba(196, 196, 196, 1);
}

Also Read : Get day, month and year Difference in JavaScript

Right Semi Circle

Right Semi Circle
  1. To create left-semi-circle, height should be double of width.
  2. top-left corner and bottom-left corner of border-radius should be 0.
  3. top-right corner and bottom-right corner of border-radius should equal to width.
.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 with css:

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

Top Left Quarter Circle

Top Left Quarter Circle
Top Right Quarter Circle
  1. To create top left quarter circle, height should be equal to width.
  2. top-left corner of border-radius should be equal to width.
  3. top-right corner, bottom-right corner and bottom-left corner of border-radius should 0.
.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

Top Right Quarter Circle
Top Right Quarter Circle
  1. To create top right quarter circle, height should be equal to width.
  2. top-right corner of border-radius should be equal to width.
  3. top-left corner, bottom-right corner and bottom-left corner of border-radius should 0.
.top-right-quarter-circle {
  width: 300px;
  height: 300px;
  border-radius: 0 300px 0 0;
  background-color: rgba(196, 196, 196, 1);
}

Also Read: Angular: All about pipes template in angular

Bottom Right Quarter Circle

Bottom Right Quarter Circle
Bottom Right Quarter Circle
  1. To create bottom right quarter circle, height should be equal to width.
  2. bottom-right corner of border-radius should be equal to width.
  3. top-left corner, top-right corner and bottom-left corner of border-radius should 0.
.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

Bottom Left Quarter Circle
Bottom Left Quarter Circle
  1. To create bottom left quarter circle, height should be equal to width.
  2. bottom-left corner of border-radius should be equal to width.
  3. top-left corner, bottom-right corner and top-left corner of border-radius should 0.
.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

Reference : CSS Border-radius

Leave a Reply