title: Having "border-radius: 100%;" as an IDEAL circle when font size changes
body: <p><a href="https://jsfiddle.net/x7zustcb/" rel="nofollow noreferrer">Here</a> is the JSFiddle with a circle (made with <strong>border-radius: 100%;</strong>) highlighted in red.<br><br> Font size is adaptive to viewport width. When viewport is wide enough the circle looks ideal, but as the viewport width <em>dicreases</em> the circle vertically flattens.<br><br>Is there a way to <em>always</em> keep the circle ideal?<br><br>Here is the code:</p>
  
  <pre><code>&lt;div class="meaning"&gt;
  &lt;ol class="circle"&gt;
  &lt;li&gt;Text_1&lt;/li&gt;
  &lt;/ol&gt;
  &lt;/div&gt;
  
  .meanings_and_examples {
  display: flex;
  flex-direction: column;
  }
  
  .meaning {
  width: auto;
  text-align: left;
  color: #1f2c60;
  font-size: calc(0.5em + 2.3vw);
  }
  
  ol.circle {
  position: relative;
  list-style-type: none;
  padding-left: 3em;
  margin-left: 1vw;
  border: 2px solid purple;
  }
  
  li {
  line-height: calc(1em + 1.5vw);
  }
  
  ol.circle &gt; li {
  position: relative;
  counter-increment: item;
  margin-top: 1.5%;
  border: 2px solid orange;
  }
  
  ol.circle &gt; li::before {
  position: absolute;
  transform: translateX(-150%);
  content: counter(item);
  display: inline-block;
  text-align: center;
  border-radius: 100%;
  width: calc(1.1em + 1.5vw);
  background: #1f2c60;
  color: white;
  border: 2px solid red;
  }
  </code></pre>