How to bend the border of a link only at the end of the link

I made this design in Adobe XD:[![Button Design][1]][1]

I tried making it look like this with border radius but the corners are acting weird.

This is how it looks for me with CSS:[![Button CSS][2]][2]

I'm making this button with a link instead of button btw!

This is my CSS:

.overlay a {
  margin-left: 20px;
  text-decoration: none;
  color: #e4e0e0;
  border: 3px solid #f354f3;
  background-color: #595959;
  color: #f354f3;
  padding: 5px 100px;
  border-radius: 20%;
}

If i make the border-radius more than 20% then the whole border starts to bend. I would like to ony want the end of the border to bend like in the design!

Hopefully someone can help me. Thanks! [1]: https://i.sstatic.net/zLLl1.jpg [2]: https://i.sstatic.net/hcPdH.jpg

Solution

Percentual border radius depends on height/width (20% of height from left to top; 20% of width from top to left).

You can use non-percentual value (like rem or px)

.something {
  border: 3px solid #f354f3;
  padding: 1rem 2rem;
  border-radius: 1rem;
}

<div class="something">some text in my element</div>

If you would like to have full border radius (circle-like) you can set that value really high. Something like:

.something {
  border: 3px solid #f354f3;
  padding: 1rem 2rem;
  border-radius: 9999px;
}

<div class="something">some text in my element</div>