-3

I'm currently having trouble finding an example for what i'm specially looking for. I am trying to create a circle around my text using CSS. I've found examples of a circle with the text inside, but in this instance i'm trying to create a circle surrounding the text.

An example of what i'm trying to create:

enter image description here

neoslo
  • 353
  • 1
  • 3
  • 19
  • 1
    Does this answer your question? [css: how to draw circle with text in middle?](https://stackoverflow.com/questions/16615403/css-how-to-draw-circle-with-text-in-middle) – JΛYDΞV Jan 06 '20 at 16:35

1 Answers1

1

Try using border-radius: 50% to turn any block element like a div with an equal height and width into a circle.

.circle {
  height: 2em; /* just an example size */
  width: 2em;
  border: 4px solid #f00;
  border-radius: 50%;
}

To center the text within the circle, you may want to use flexbox properties on the element as well, though this is not the only way you could achieve that.

.circle {
  height: 2em;
  width: 2em;
  border: 4px solid #f00;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center; 
}
Stephen M Irving
  • 1,324
  • 9
  • 20