How to create circle with HTML and CSS

In most cases while we implement designs, we use boxes, sometimes, it is okay to also use some nice circles while making designs.

In this short tutorial, you learn how to create a fancy circle using HTML and CSS.

Declare your tag (this can be any tag; div, p, or h1). For the sake of this tutorial, we will use the div tag.

<div class="fancy-circle">Hi! I want to be fancy.</div>

Next, declare the style:

.fancy-circle{
      text-align: center;
      padding: 2em;
      border: 0.5em solid #00838f;
      color: #00838f;
      width: 4em;
      height: 4em;
      font-size: 2em;
      border-radius: 100%;
      display: flex;
      margin: 33vh auto auto auto;
    }

You should get the below result.