How to Create Half Circle in HTML and CSS

In this tutorial, we will learn how to create half circle in HTML and CSS. When you are working on a website, you may want to display some shapes such as a half circle. The half circle can be created using div element.

By default, the div is a rectangular-shaped box, but by using CSS border-radius properties, you can easily turn it into a half-circular div. Please note that, when creating a half-circular div, the width should be double in comparison to the height.

In the following example, we will demonstrate how you can create a half circle using CSS. Please have a look over the code example and the steps given below.


  • In the HTML file, we have one empty div element.
  • In the head element, we have added a stylesheet (style.css) using the link element.
<!DOCTYPE html>
<html lang="en">

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Half-cirled div</title>
    <link rel="stylesheet" href="./style.css">




  • We are selecting the div and setting the margin property value to 0 auto to horizontally center align the div.
  • The height and width property value to 150px and 300px; background-color property value to yellow; border property value to 2px solid green; and the border-radius property value to 150px 150px 0 0. As a result, it will create a half-circular div.
div {
    margin: 0 auto;
    height: 150px;
    width: 300px;
    background-color: yellow;
    border: 2px solid green;
    border-radius: 150px 150px 0 0;