How to create circle with HTML and CSS
Noah Olatoye

Noah Olatoye

1076

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.

Fancy Circle

A tech career with instinctHub

Ready to kickstart your tech career or enhance your existing knowledge? Contact us today for a dedicated instructor experience that will accelerate your learning and empower you to excel in the world of technology.

Our expert instructors are here to guide you every step of the way and help you achieve your goals. Don't miss out on this opportunity to unlock your full potential. Get in touch with us now and embark on an exciting journey towards a successful tech career.

Add Comments

First Name
Last Name
Say something:

Are you human? Solve this:

+ = ?

Post you may also like