Circles with Text in CSS

Quick Tips in Web Development

Ashok Khanna
May 12, 2022

When designing presentations and websites, I often like to use circles with text contained inside. To achieve this with some basic CSS, we just have to do something like the following.

.circle {
background: burlywood;
border: 10px solid #000;
color: #000;
width: 50vw;
height: 50vw;
font: 8.5vw Arial, sans-serif;

justify-content: center;
align-items: center;
border-radius: 100%;
text-align: center;
display: flex;

And then something as easy the following in your webpage:

<div class="circle">Subscribe Now</div>

Try it out! The result should be something similar to the below. Then just play around with the width / height / font size and customise the colors too to your website’s color palette. Enjoy!

Ashok Khanna

Masters in Quantitative Finance. Writing Computer Science articles and notes on topics that interest me, with a tendency towards writing about Lisp & Swift