Guru Guru - 4 months ago 36
CSS Question

Border radius css issue with percent

I've tried to make rounded border but couldn't.

This is the image I want to implement.

Disregard about background.

enter image description here

This is the css code I've done.

padding: 10px 25px;
background: #777777;
border-radius:50% 50%;

But the result is as follows.

enter image description here

Any help would be appreciate.


The possible duplicate comment suggests the problem but does not give any solution.

And using 1em will set border radius equal to the base font-size applied to the element.

I would suggest you to give values of 5-6 ems. In this case it will go till any shortest side reaches 50% and then will become ineffective.

.btn {
  border: 0;
  background: #ddd;
  border-radius: 6em;
  padding: 8px 12px;
  margin: 5px;
<button type="button" class="btn">Button 1</button>
<button type="button" class="btn">Button 2</button>
<button type="button" class="btn">Button 3</button>
<button type="button" class="btn">Button 4</button>