How to create a CSS circle with border-radius

With the CSS3 property border-radius we can create perfect circles.

Basically set border-radius to 50% and then a width and height.

I’ve added some extra styles to make it look prettier ;)

.circle{
               
    border-radius: 50%;
   
    width: 150px;
    height: 150px; 
   
    /* Extra */
   
    background:#a0d3ff;
    padding:20px;
    font-size: 30px;
    line-height: 70px;
    text-align: center;        
}

Use the .circle class to any element:

<div class="circle">This is a CSS circle</div>

Result

This is a CSS circle

Tags:

No comments yet, leave yours!

Leave a Reply

Add <code> Some Code </code> by using this tags.