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; }
Code language: CSS (css)

Use the .circle class to any element:

<div class="circle">This is a CSS circle</div>
Code language: HTML, XML (xml)


About Ricard Torres

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

@ricard_dev @ricard_dev

📝 Blog 🎙 Podcast

Leave a Reply

Add <code> Some Code </code> if you need to.