HTML:
<?xml version="1.0" encoding="utf-8"?>
<html>
<head>
<title>Circle</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
</head>
<body>
<div class="circle"><p class="innerCircle"></p></div>
</body>
</html>
CSS:
.circle {
width: 450px;
height: 450px;
border-top: 30px solid #416fa6;
border-right: 30px solid #718242;
border-bottom: 30px solid #63ae98;
border-left: 30px solid #b45447;
-webkit-border-radius: 300px;
-moz-border-radius: 300px;
border-radius: 300px;
}
.innerCircle {
width: 0px;
height: 0px;
border-top: 210px solid #416FA6;
border-left: 210px solid #B45447;
border-right: 210px solid #718242;
border-bottom: 210px solid #FFA500;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
margin-left: 15px;
margin-right:0px; …