How to Draw a Semi-Circle using HTML and CSS ? Last Updated : 15 Jul, 2025 Comments Improve Suggest changes Like Article Like Report To draw a semi-circle using HTML and CSS, Use the 'border-radius' property in combination with a square-shaped container div. Set border-radius to create a circular shape, and then use additional CSS to clip one half, forming a semi-circle. Approach:First create a HTML structure, specifying language and adding a title.Enhance visuals by adding a green header with the text "GeeksforGeeks."Apply CSS to centralize content, and style a green semi-circle with border-radius property.Position a div in the center using position: absolute and transform: translate(-50%, -50%).Example: HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Semi Circle</title> <style> * { margin: 0; padding: 0; background-color: white; text-align: center; margin-top: 10px; } /* Using the border-radius property to draw the semi-circle*/ div { position: absolute; top: 20%; left: 50%; transform: translate(-50%, -50%); height: 100px; width: 200px; border-radius: 150px 150px 0 0; background-color: green; } </style> </head> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <h3>Drawing a semi circle</h3> <div></div> </body> </html> Output: CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples. Comment More infoAdvertise with us Next Article How to Draw a Trapezium using HTML and CSS ? L lakshgoel204 Follow Improve Article Tags : Web Technologies Web Templates Similar Reads How to Draw a Pentagon using HTML and CSS? A Pentagon is a 5 sided polygon or geometric shape with 5 internal angles measuring 108 degrees each. The pentagon can be drawn using simple HTML and CSS, the below sections will guide you on how to draw the desired shape. HTML Code: In this section we will create a simple div element using the div 2 min read How to Draw a Half Moon using HTML and CSS? Various shapes can be drawn using HTML and CSS and so is the shape of a Half Moon, This shape can be drawn by manipulating a div element using some CSS Properties. HTML Code: In this section we have a basic div tag. html <!DOCTYPE html> <html lang="en"> <head> <meta ch 2 min read How to draw a circle using SVG tag in HTML ? In this article, you will learn about SVG basic shape like circle which is among the different shapes of SVG like <rect>, <line>, <ellipse>, <polygon>, etc. So you can easily draw circles using <circle> tag whose parent tag is SVG tag in HTML. Basically, the <circle 2 min read How To Create a Thumbnail Image using HTML and CSS ? The thumbnail image is used to add a 1px rounded border around the image. A thumbnail is a small size image that represents a larger image. The thumbnail is the image that is displayed as a preview of the video. It is used to represent what the video contains or what it is related to. It is displaye 1 min read How to Draw a Trapezium using HTML and CSS ? A Trapezium is a Quadrilateral which has two parallel and two non-parallel sides. In this article we will create a Trapezium shape using simple HTML and CSS. HTML Code: In this section, we will create a simple element using the HTML div tag. HTML <!DOCTYPE html> <html lang="en"> <head 1 min read How to create a Pie Chart using HTML & CSS ? A Pie Chart is a circular graph that shows data as percentages of a whole, with each slice representing a category. For example, Education 40%, Healthcare 30%, Transportation 20%, and Others 10%. It’s ideal for visualizing and comparing parts of a whole in a clear, simple way.Pie Chart using HTML CS 3 min read Like