How to draw Half Circle using Div tag (HTML,CSS)

Thursday 16 March 2017

How to draw Half Circle using Div tag (HTML,CSS)

It is very easy to draw half circle using css and html. you just need to copy and past given code below and save you file as halfCircle.html and run this file in your browser :-

<html>
<head>
<title>
Half Circle CSS
</title>
<style>
.half-circle {
width: 200px;
height: 100px;
background-color: gold;
border-top-left-radius: 110px;
border-top-right-radius: 110px;
border: 10px solid gray;
border-bottom: 0;
}
</style>
</head>
<body>
<div class="half-circle"></div>
</body>
</html>

Just save your file with .html extension and run in any browser.

OUTPUT