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 

 tag.

HTML

filter_nonebrightness_4

<!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 #html #web technologies

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