A Semi-Circle or a Half-Circle shape can be easily created using HTML and CSS. We will use the border-radius property to draw the desired output.
HTML Code: In this section we will create a simple “div” element using the <div> tag.
CSS Code: In this section we will first design the “div” box using simple CSS properties and then draw the semi-circle using the border-radius property.
Final Code: It is the combination of the above two code sections.
- How to Draw a Half Moon using HTML and CSS?
- How to Draw a Trapezium using HTML and CSS ?
- How to Draw a Pentagon using HTML and CSS?
- How to draw a circle with gradient border using CSS ?
- How to Draw a Curved Edge Hexagon using CSS ?
- HTML | Canvas Draw Bezier Curve
- How to draw with mouse in HTML 5 canvas ?
- How to draw Inscribed circle of a triangle using p5.js ?
- How to Draw Graphics using Canvas in HTML5 ?
- p5.js | draw() Function
- How to override the CSS properties of a class using another CSS class ?
- How to create a drag and drop feature for reordering the images using HTML CSS and jQueryUI ?
- How to create X and Y axis flip animation using HTML and CSS ?
- Difference between bootstrap.css and bootstrap-theme.css
- How to create Glowing Star effect using HTML and CSS?
- Email Template using HTML and CSS
- Create a Sticky Social Media Bar using HTML and CSS
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.