Creating a perfectly symmetrical circle using border-radius without specifying a height or width [duplicate]

Question

It appears setting my border-radius to either 50% or 100% didn't do the trick and gives the span tag a stretched appearance. Is it possible to get this circle perfectly symmetrical without setting a height or width to it?

span {
  background: #232323;
  border-radius: 50%;
  color: #fff;
  display: inline-block;
  font-family: Arial, sans-serif;
  padding: 6px;
}

<span>x</span>

How about a bullet content: '\x02022'; font-family: sans-serif; (if I'm correct) and control with font-size? — Tim Vermaelen
– Tim Vermaelen, Commented May 27, 2015 at 17:24
I claim no credit for this but have a look at this fiddle. I found this code on the internet a few months back and had stored the crux of its content for future analysis (which I never managed to to :P). — Harry
– Harry, Commented May 27, 2015 at 17:38
Is the content of span always one letter? If so, this will work for any font-size jsfiddle.net/pts4cemx/5 — mirek
– mirek, Commented May 27, 2015 at 17:41
Funnily enough Google does return the source and here it is :) — Harry
– Harry, Commented May 27, 2015 at 17:44

Denys Séguret · Accepted Answer · 2015-05-27 17:12:11Z

1

A solution is to just set the width to the computed font height:

width: 1em;

span {
  background: #232323;
  border-radius: 50%;
  color: #fff;
  display: inline-block;
  padding: 6px;
  width: 1em;
  text-align: center;
}

<span>x</span>

answered May 27, 2015 at 17:12

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

BoltClock Over a year ago

That's still not a perfect circle.

Carl Edwards Over a year ago

I can see what @BoltClock is talking about. The sides seem squished.

Denys Séguret Over a year ago

Yes, this needs tuning of the padding using the font-size unit. I must leave now, I'll remove my answer if it isn't easily fixable.

DardanM · Accepted Answer · 2015-05-27 17:27:52Z

0

Something like this maybe?

span {
    background: #232323;
    border-radius: 100%;
    color: #fff;
    display: inline-block;
    font-family: arial;
    font-size: 20px;
    text-align: center;
    width: 1.35em;
    padding-bottom:.2em;
}

span.medium {
  
  font-size: 50px;
}


span.ridikulus {
  
  font-size: 500px;
}

<span >x</span>
<span class="medium">x</span>
<span class="ridikulus">x</span>

answered May 27, 2015 at 17:27

DardanM

958 bronze badges

2 Comments

Carl Edwards Over a year ago

What did you have to determine mathematically to get this to work? I see that something was done with both width and padding-bottom using em as your unit of measure.

DardanM Over a year ago

No math :p I just messed with it for a few seconds to get what looks like a circle then tried different sizes to see if it stays the same

Tim Vermaelen · Accepted Answer · 2015-05-27 18:34:25Z

To provide an alternative approach, instead of relying on border-radius, I was thinking about using a glyph • and position that on the span tag.

The size can be adjusted using font-size. The big advantage is that you don't need to generate a perfect circle.

span {
    color: #fff;
    position: relative;
    line-height: 1;
    display: inline-block;
    padding: 10px;
}
span:before {
    content:'\02022';
    color: #000;
    font-family: sans-serif;
    font-size: 10rem;
    position: absolute;
    z-index: -1;
    line-height: 0;
    left: -14px;
    top: 20px;
    text-shadow: 0 0 10px rgba(0,0,0,0.4);
}

<span>x</span>

Collectives™ on Stack Overflow

Creating a perfectly symmetrical circle using border-radius without specifying a height or width [duplicate]

3 Answers 3

3 Comments

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Linked

Related