Circle With Two Colors using CSS

In this tutorial we will see how to make a Circle With Two Colors using CSS. Pure CSS is used for this purpose, Both HTML and CSS code is given, feel free to use it in your projects.

Table of Contents

• HTML Code
• CSS Code
• Demo
• Video Tutorial
• More CSS Tutorials

HTML Code

HTML Code is given below.

<div>
<span class="circle"></span>
</div>

CSS Code

CSS Code is given below.

.circle
{
border-right: 100px solid #00AD48; 
border-top: 100px solid #00AD48;
border-left: 100px solid #004AAD;
border-bottom: 100px solid #004AAD;
transform: rotate(45deg);
border-radius: 100px;    
display: inline-block;    
}

Demo

Check Demo

Video Tutorial

Watch our video tutorial on how to make a Circle With Two Colors using CSS.