How can I create a circle in CSS with number in the center to use in wordpress

Question

I’m starting in CSS and Wordpress, would like to create a pattern of articles with circle format with numbers in the center.

My idea is for a bingo site, then I would like to update only the numbers, leaving the circle format as standard.

Something like this. It’s possible?

Answer 1

Use properties of display: flex for vertical and horizontal alignment of the number, background degrade, box-shadow to create a shadow and border-radius: 50% to create a circle:

ul, li{
   margin: 0; padding: 0;
   list-style: none;
}

ul.circulo li, div.circulo{
   display: flex;
   align-items: center;
   justify-content: center;
   width: 45px;
   height: 45px;
   border-radius: 50%;
   float: left;
   margin: 4px;
   font-size: 30px;
   font-weight: bold;
   color: #555;

   background: -moz-linear-gradient(270deg, #f5f5f5 0%, #f5f5f5 16%, #999999 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(16%, #f5f5f5), color-stop(100%, #999999));
   background: -webkit-linear-gradient(270deg, #f5f5f5 0%, #f5f5f5 16%, #999999 100%);
   background: -o-linear-gradient(270deg, #f5f5f5 0%, #f5f5f5 16%, #999999 100%);
   background: -ms-linear-gradient(270deg, #f5f5f5 0%, #f5f5f5 16%, #999999 100%);
   background: linear-gradient(180deg, #f5f5f5 0%, #f5f5f5 16%, #999999 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#999999',GradientType=0 );
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#999999',GradientType=0 );

   -webkit-box-shadow: 2px 2px 2px 0px rgba(50, 50, 50, 0.75);
   -moz-box-shadow:    2px 2px 2px 0px rgba(50, 50, 50, 0.75);
   box-shadow:         2px 2px 2px 0px rgba(50, 50, 50, 0.75);
}

<h2>Com LI:</h2>

<br />

<ul class="circulo">
   <li>01</li>
   <li>02</li>
   <li>03</li>
   <li>04</li>
   <li>05</li>
</ul>

<br clear="all" /><br />

<h2>Com DIV:</h2>

<br />

<div class="circulo">01</div>
<div class="circulo">02</div>
<div class="circulo">03</div>
<div class="circulo">04</div>
<div class="circulo">05</div>

With divs:

Answer 2

More or less that, main property is the border-radius:

.circulo{
 border: 1px solid #000;
 border-radius:30px;
 width:50px;
 height:50px;
 text-align:center;
 vertical-align: middle;
 background-color: #ffe;
 line-height:50px;    
 box-shadow: 2px 2px 5px #999;
}

<div class='circulo'>666</div>

Answer 3

Only use circular edge with gradient:

#num {
  width: 75px;
  height: 75px;
  box-shadow: inset -25px -25px 40px rgba(0,0,0,.5);
  display: flex;
  flex-flow: column;
  align-items: center;       /* alinhar verticalmente   */
  justify-content: center;   /* alinhar horizontalmente */
  font-size: xx-large;
  font-family: sans, serif;
  border: 1px solid #ccc;
  border-radius: 100%;
}

<div id="num">10</div>

Bonus: this video is a must-see for anyone who wants to start digging deeper into CSS borders https://www.youtube.com/watch?v=b9HGzJIcfDE

Answer 4

in the CSS using border-radius = 100% I believe it’s the simplest way