Try like this.
button{
background: transparent;
border: 2px solid black;
font-size: 25px;
border-radius: 999px;
width: 200px;
padding: 5px;
}<button>View All</button>Solution 1 :
Solution 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%…
Solution 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
Problem :
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.
Comments
Comment posted by Sato Takeru
Border-radius 50% makes whole border radius. So you have to make border radius specific pixels like my code.
Comment posted by Border-radius in percentage (%) and pixels (px) or em
I encountered this issue the other day as well haha, this explains it: