How to use CSS to surround a number with a circle?

html

css

responsive-design

accessibility

byAnton Shumikhin·Aug 4, 2024

The quickest way to enclose a number in a circle using CSS is to create a div with a border-radius: 50%, making sure the width and height are equal. You can center the number with text-align: center and line-height equal to the div's height.

<div class="circle">1</div>

.circle {
  display: inline-block;
  width: 50px;       
  height: 50px;      
  line-height: 50px; 
  text-align: center;
  border-radius: 50%; 
  border: 2px solid black; /* Solid black border, just like my coffee ☕ */
}

This yields a bulletproof circle styled purely in CSS.

Advanced techniques: Making your CSS circles rock

Let's explore some advanced tactics to make your CSS circles more flexible, stylish, and browser friendly.

Flexible circle dimensions

Switch to em units for a scalable circle that reacts to your font size, letting it fit into responsive designs like a charm:

.circle {
  width: 2em;       
  height: 2em;      
  line-height: 2em; 
  /* ...the rest of the properties... */
}

Keeping it crisp for legacy browsers

For older browsers like IE8 that may not play well with border-radius, deliver a fallback like a conditional stylesheet or pre-drawn .png images.

Ensuring number legibility

Readability is key: choose a font size and type that fits your circle like a glove. Bigger numbers or multiple digits might call for padding or border-radius adjustments:

.circle {
  font-size: 1.2em; /* Because the '80s called, they want their small fonts back 🎸 */
  border-radius: 50%;
  padding: 0.6em;   /* Padding: because your number needs personal space! */
  /* ...the rest of the properties... */
}

The Unicode method

Want a quick-and-dirty method to get encircled numbers without any styling? Use Unicode encircled numbers like ①, ②, etc.

<p>Here is your encircled number: ①</p>

Leverage Bootstrap

Using Bootstrap? The .badge class has got you covered. Stylish circular number, coming right up!

<span class="badge badge-pill badge-secondary">1</span>

Bootstrap provides guidelines on badges in their documentation. Always RTFM!

Advanced Designs with Pseudo-elements

If you're feeling fancy, apply ::before or ::after pseudo-elements to create more complex designs or double rings. Make sure you set content to some value to render them:

.circle::before {
  content: ""; /* Psst... Don't tell anyone, but we're pulling a magic trick here. */
  position: absolute;
  top: -1em; left: -1em;
  right: -1em; bottom: -1em;
  border-radius: 50%;
  border: 2px dashed #666; /* We're feeling a bit dashed today, aren't we? */
}

Keeping it accessible

Accessibility matters. For screen readers, use <span aria-hidden="true">1</span> in your circled number. Keeping web inclusive!

Cross-browser compatibility

Make sure your masterpieces look stellar in every browser. Check compatibility with tools like BrowserStack or Can I Use, and validate your markup and styles. Shine bright like a diamond! 💎

explain-codes / Html / How to use CSS to surround a number with a circle?

Linked

Height equal to dynamic width (CSS fluid layout)



Remove inner shadow of text input



Can I scale a div's height proportionally to its width using CSS?



Progress Bar with HTML and CSS



Rounded table corners CSS only

