Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 30 Jul, 2021

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.

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>
</head>
  
<body>
    <div></div>
</body>
  
</html>


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.

CSS






<style>
    * {
        margin: 0;
        padding: 0;
        background-color: white;
  
    }
  
    /* Using the "border-radius" property
       to draw the semi-circle*/
  
    div {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 100px;
        width: 200px;
        border-radius: 150px 150px 0 0;
        background-color: green;
    }
</style>


Final Code: It is the combination of the above two code sections.

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;
  
        }
  
        /* Using the border-radius property 
           to draw the semi-circle*/
        div {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            height: 100px;
            width: 200px;
            border-radius: 150px 150px 0 0;
            background-color: green;
        }
    </style>
</head>
  
<body>
    <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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :