October 8, 2022

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.

HTML

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">

<head>
    <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">
</head>

<body>
    <div></div>
</body>

</html>

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;
}

You May Also Like: