CSS - How to draw a circle

1. Start with a square

 .circle { 
   display:inline-block;
 
   width: 100px;
   height: 100px;
   border: 2px solid darkblue;
 
 }

2. Round the corners

 .circle {
   display:inline-block;
   width: 100px;
   height: 100px;
   border: 2px solid darkblue;
 
   border-radius: 50%;
 


 } 

Mouse over circle for animation.

3. Add a fill color

 .circle {
   display:inline-block;
   width: 100px;
   height: 100px;
   border: 2px solid darkblue;
   border-radius: 50%;
 
   background-color: pink;
 

 } 

4. Align

 .circle {
   display:inline-block;
   width: 100px;
   height: 100px;
   border: 2px solid darkblue;
   border-radius: 50%;
   background-color: pink;
 
   vertical-align: bottom;
 
 } 

Ads by Google

Prev article

Newer
Next article

Older

Ask a question, send a comment, or report a problem - click here to contact me.