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.