How to make a div rounded only from right and left? [duplicate] - html

Question

This question already has answers here:
Border-radius in percentage (%) and pixels (px) or em
(3 answers)
Closed 2 years ago.
I want to round left and right side of the button like below
Notice that its straight line from top and bottom and only rounded from both sides.
button{
background: transparent;
border: 2px solid black;
font-size: 25px;
border-radius: 50%;
width: 200px;
padding: 5px;
}
<button>View All</button>
I have tried to use border-radius:50% but it made the whole button rounded.

Answer 1

Try like this.
button{
background: transparent;
border: 2px solid black;
font-size: 25px;
border-radius: 999px;
width: 200px;
padding: 5px;
}
<button>View All</button>

Answer 2

You can define a different border radius for the left/right side's of the div.
Try:
button{
background: transparent;
border: 2px solid black;
font-size: 25px;
border-radius: 10%/50%;
width: 200px;
padding: 5px;
}
<button>View All</button>
And experiment with variations of border-radius: 10%/50% like border-radius: 20%/40%...

Answer 3

You can specify each of the four corners radius with two percentages, ie: top-left, bottom-left, top-right & bottom-right. One for each corners horizontal and vertical semi-major and semi-minor axes of the ellipse.
button{
background: transparent;
border: 2px solid black;
font-size: 25px;
border-top-left-radius: 17.5% 50%;
border-bottom-left-radius: 17.5% 50%;
border-top-right-radius: 17.5% 50%;
border-bottom-right-radius: 17.5% 50%;
padding: 10px 25px;
}
<button>View All</button>
See the following Mozilla article for further explanation: MDN: border-radius