title: Border radius not dependent on height and width
body: <p>I need a border-radius rule that will make that element will be rounded the same not matter what is the size(height) of the element.</p>
  
  <p>Here is my example: </p>
  
  <pre><code>&lt;div class="container"&gt;
  
    &lt;div class="element first"&gt;&lt;/div&gt;
    &lt;div class="element sec"&gt;&lt;/div&gt;
    &lt;div class="element third"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  
  $blue: #0084ff;
  
  .container {
    display: flex;
    flex-flow: column;
  
    .element {
      background-color: $blue;
      border-radius: 100px;
      width: 500px;
      margin-bottom: 1px;
  
      &amp;.first{
        height: 50px;
      }
  
      &amp;.sec{
        height: 150px;
      }
  
      &amp;.third{
        height: 250px;
      }
    }
  }
  
  </code></pre>
  
  <p><a href="https://jsfiddle.net/ballkar/75tda12q/29/" rel="nofollow noreferrer">https://jsfiddle.net/ballkar/75tda12q/29/</a></p>
  
  <p>Here is effect that I need to achive:</p>
  
  <p><a href="https://i.stack.imgur.com/QMhkB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QMhkB.png" alt="enter image description here"></a></p>