How to form this kind of border curve?

Issue

I'm interested in how this button's stylized border curves. How to curve them borders in this manner?

Solution

You can use border-bottom-left-radius and border-top-right-radius.

document.querySelector(".button").addEventListener("click", () => alert("Hi"))

.button {
  background: yellow;
  color: black;
  width: 2.5em;
  height: 1em;
  padding: 0.5em 1em;
  border: 1px black solid;
  cursor: pointer;
  user-select: none;
  
  border-bottom-left-radius: 2em;
  border-top-right-radius: 2em;
}

.button:hover {
  background: black;
  color: yellow;
  border: 1px yellow solid;
}

<div class="button">Test</div>

Answered By - NVRM