Элемент и контейнер имеют одинаковый радиус границы, но не выравниваются должным образом

Question

Я пытаюсь выровнять закругленную ссылку внутри скругленного контейнера внизу.

Но даже когда радиус границы одинаков для обоих элементов, между ними есть небольшая разница, и это заметно при использовании высококонтрастных цветов.

Вот проблема. https://jsfiddle.net/rumeau/q349vse7/3/

.container {
  border: 2px solid red;
  border-radius: 16px;
  background:white;
  overflow:hidden;
}
.link {
  display:block;
  text-align:center;
  border-radius: 16px;
  background: red;
  color: white;
  padding-top: 8px;
  padding-bottom: 8px;
}

<div class="container">
  
  <p>
  Content
  </p>
  <a class="link" href="#">Read more</a>

</div>

Есть ли какое-то стандартное решение для этого, поэтому мне не нужно использовать обходной путь?..

Приветствия.

Answer 1

Могу предложить такое решение:

.container {
  border: 2px solid red;
  border-bottom: none; /* <----- add this it */
  border-radius: 16px;
  background:white;
  overflow:hidden;
}
.link {
  display:block;
  text-align:center;
  border-radius: 16px;
  background: red;
  color: white;
  padding-top: 8px;
  padding-bottom: 8px;
}

<div class="container">
  
  <p>
  Content
  </p>
  <a class="link" href="#">Read more</a>

</div>