How to create a hover effect that changes background color and looks rounded

Issue

I'm trying to create a hover effect on a text (p) HTML element. I want the background color of the text element to change, and also, to look oval-shaped. See picture below of what I am trying to achieve. I can't figure out how to get the oval shape - when I add border radius, it rounds the corners, but not the left and right sides.

Desired effect:

Here is the closest I've gotten:

border: 1px solid transparent;
border-radius: 10px;

I know I need to add padding on the left...but just trying to figure out the oval shape first.

Thanks so much in advance for any help.

Solution

What I have found to always work is to set a border radius that is higher than the total height of the button, eg: 100px or even 200px to be safe.

https://codepen.io/Luke-Johns-lukeybytes/pen/WNmGXpW

.rounded {
  background: black;
  border-radius: 100px;
  color: white;
  padding: 2rem;
}

Answered By - lukeybytes