How To Create A Circle Using Only HTML and CSS?


STEP 1:
Add a <div class="semi-circle"></div> in the body section of an HTML document.
STEP 2: Go To your CSS file and add this code.

 .semi-circle{
 width: 150px;
  height: 75px;
  background-color: black;
  border-radius: 100px 100px 0 0;
}

Output


The width: 150px; and height: 75px; gives width and height and create a rectangle. Then, background-color: black; gives color to the background so that we can see the actual rectangle created. And the last one, border-radius: 100px 100px 0 0;, it create a rounded border on the top-left and top-right corner of  the rectangle. The two zeros in (border-radius: 100px 100px 0 0;) is for the border-radius for bottom-right and bottom-left and we kept it width 0 to make it look like a semi-circle.


Trending Posts

5 Awesome Computer Shortcut Key Tricks You Must Try

What Are The Use of Function Keys F1 to F12 on The Keyboard?

Is Web Development Dying In 2022?

Why iPhones Don't Have Memory Card Slots?

Why Do All Celebrities Use iPhones?

5 Tips To Become A Computer Genius | How To Become A Computer Genius?

12MP vs 48MP vs 64MP vs 108MP | Does More Megapixel Equal Better Image Quality?

Can I Start Coding At The Age of 30, 40 or 50?

How To Take Screenshot On HP, Dell, Asus Laptop And PC?

How To Make Your Computer Fast?