Open In App

How to Draw a Semi-Circle using HTML and CSS ?

Improve
Improve
Like Article
Like
Save
Share
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:

Screenshot-2023-12-20-115925

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.



Last Updated : 12 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads