Радиус границы не зависит от высоты и ширины

Question

Мне нужно правило радиуса границы, при котором этот элемент будет округлен одинаково, независимо от размера (высоты) элемента.

Вот мой пример:

<div class="container">

  <div class="element first"></div>
  <div class="element sec"></div>
  <div class="element third"></div>
</div>


$blue: #0084ff;

.container {
  display: flex;
  flex-flow: column;

  .element {
    background-color: $blue;
    border-radius: 100px;
    width: 500px;
    margin-bottom: 1px;

    &.first{
      height: 50px;
    }

    &.sec{
      height: 150px;
    }

    &.third{
      height: 250px;
    }
  }
}

https://jsfiddle.net/ballkar/75tda12q/29/

Вот эффект, который мне нужно достичь:

Answer 1

Вы должны применить он border-radius: 25px; вместо border-radius: 100px;.

, для большего понимания посмотрите следующий фрагмент:

.container {
  display: flex;
  flex-flow: column;
}

.element {
  background-color: #0084ff;
  width: 500px;
  margin-bottom: 1px;
  border-radius: 25px;
}

.element.first {
  height: 50px;
}

.element.sec {
  height: 150px;
}

.element.third {
  height: 250px;
}

<div class="container">
  <div class="element first"></div>
  <div class="element sec"></div>
  <div class="element third"></div>
</div>

Ниже приведен код sass для вас:

$blue: #0084ff;
$blue-darker: darken($blue, 5);

.container {
  display: flex;
  flex-flow: column;

  .element {
    background-color: $blue;
    border-radius: 25px;
    width: 500px;
    margin-bottom: 1px;

    &.first{
      height: 50px;
    }

    &.sec{
      height: 150px;
    }

    &.third{
      height: 250px;
    }
  }
}