How to form this kind of border curve?-CodePudding

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

CodePudding user response：

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 >Test</div>