Adding text in a circle border

Question

The following code below adds a radio button with a number inside a border, but the border should be circle, how can I make it circle?

Note that the position of the text is important to not be affected by the css.

 
 p {
 outline-style: solid;
 padding : 16px;
     position: absolute;

 }

<p><input type="radio">1</p>

Just use `border: 3px solid black; border-radius: 50%;` instead of `outline-style: solid;`? — Huelfe, Feb 20 '18 at 15:44

BenM · Accepted Answer · 2018-02-20T15:45:40.050

2

Use the border and border-radius properties instead of outline-style:

 p {
   border: 3px solid #000;
   border-radius: 50%;
   height: 45px;  
   line-height: 45px;
   position: absolute;
   text-align: center;
   width: 45px;
 }

<p><input type="radio">1</p>

As you can see, you may also need to change the height and width elements to ensure that the element is a perfect circle (well, square).

edited Feb 20 '18 at 15:45

answered Feb 20 '18 at 15:44

BenM

52,573
26
113
168

Looks more like an oval than a circle – j08691 Feb 20 '18 at 15:45
@j08691 Was editing the question when you added your comment... – BenM Feb 20 '18 at 15:47
I don't want the text to change position. It is really important to keep the exact position – Feb 20 '18 at 15:59
Then don’t change the text-align or line-height properties then. – BenM Feb 20 '18 at 16:05

score 0 · Answer 2 · answered Feb 20 '18 at 15:46

0

try to set the border and then use order-radius.

p {
border: solid 2px black;
     padding : 16px;
     position: absolute;
     width: 30px;
     height: 30px;
     border-radius: 50%;
     }

<p><input type="radio">1</p>

answered Feb 20 '18 at 15:46

MESP

486
2
17

Adding text in a circle border

2 Answers2