How to put number inside a circle in pure html?

Question

I am a graphic designer and new to coding.

Can someone let me know how do I put a number inside a circle in pure HTML? I am putting it inside a table.

Have you tried anything yet ? – Pogrindis Jan 04 '21 at 16:17 — Pogrindis, Jan 04 '21 at 16:17
@ceejayoz damn, that's clever. Codegolf winner here – Pogrindis Jan 04 '21 at 16:41 — Pogrindis, Jan 04 '21 at 16:41

Pogrindis · Answer 1 · 2021-01-04T16:48:39.050

0

First, create your Circle in CSS..

#circle {
      width: 100px;
      height: 100px;
      background-image: linear-gradient(to right, rgb(38, 165, 166) 0%, rgb(124, 26, 94) 100%);
      border-radius: 50%
    }

This will be shown in a HTML container with id circle ..

<div id="circle"></div>

Inside this DIV you can put whatever number you like..

<div id="circle">69</div>

It might not align properly, so you cann modify the CSS to play.

text-align: center;

Example

Good luck with your learning, but you should show some effort when asking a question too.

EDIT//

For your pure HTML version.. You can just add the CSS to inline..

<div style="width: 100px;
      height: 100px;
      background-image: linear-gradient(to right, rgb(38, 165, 166) 0%, rgb(124, 26, 94) 100%);
      border-radius: 50%;
      text-align: center;"><h1>
69
</h1>
</div>

edited Jan 04 '21 at 16:48

answered Jan 04 '21 at 16:20

Pogrindis

7,755
5
31
44

Thanks a lot for the help. Is it possible to do this with just pure HTML without CSS? Can you let me know what do you mean "show some effort when asking question"? So next time I'll know what to do. Thanks! – foreverlearner4 Jan 04 '21 at 16:35
hmm not really.. Maybe an SVG element in html could be drawn.. but why torture yourself ? – Pogrindis Jan 04 '21 at 16:37
@foreverlearner4 I updated with a html only.. – Pogrindis Jan 04 '21 at 16:48

score 0 · Answer 2 · answered Jan 04 '21 at 16:23

Using CSS background-radius property set to 50%.

An example:

.encircled {
  display: inline-block;
  padding: 1em;
  text-align: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: orange;
  border: 5px solid black;
}

<div class="encircled">42</div>

score 0 · Answer 3 · answered Jan 04 '21 at 16:31

You need to use HTML with CSS.

Below is the CSS Code:

 .circle{
      border: 1px solid black;
      border-radius: 50%;
      height: 50px;
      width: 50px;
      text-align: center;
      justify-content: center;
      position: relative;
    }

HTML code should be:

<div class="circle">

    <p>1</p>

 </div>

.circle{
  border: 1px solid black;
  border-radius: 50%;
  height: 50px;
  width: 50px;
  text-align: center;
  justify-content: center;
  position: relative;
}

<div class="circle">

<p>1</p>

</div>

What extra info does this offer the answers ? – Pogrindis Jan 04 '21 at 16:38 — Pogrindis, Jan 04 '21 at 16:38

Ahmad Khidir · Answer 4 · 2021-01-04T16:49:28.150

Actually Table in HTML can be inflexible so there many ways you can write your code to suit your needs, but this is an idea behind it. HTML

<ul>
    <li><span>1</span>First Element</li>
    <li><span>2</span>Second Element</li>
</ul>

CSS

li>span {
  display: inline-block;
  padding: 5px;
  border: 2px solid black;  /* black border */
  border-radius: 50%;   /* for round enclosing border */
}

This should work and editable. Comment for further notice.

How to put number inside a circle in pure html?

4 Answers4