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:

This is a CSS circle

Result

This is a CSS circle

About Rick

Senior Front-end Software Engineer from Barcelona, Haidong Gumdo Instructor (korean martial art of the sword), street photographer, travel lover, TV addict, Boston Red Sox fan, and privacy advocate.

Leave a Reply

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

*
*