I need a button which looks like this: Required Button Shape

However my Button's height and width are in percentage. The only way to do this as far as I could find was border-radius to be half of width (to be specified in pixels) and as my button's width is based on percentage of parent's dimensions i don't the exact value. Putting border-radius as 50% gives a terrible shape. Button with 50% border radius

I came with a JavaScript but it requires an event:

function BorderRadius()
{
    var x=document.getElementsByClassName("LoginButton");
    x[0].style.borderRadius = (x[0].offsetHeight/2).toString()+"px";
}

Is there any way to call this JavaScript function automatically or any other solution, using CSS or JavaScript preferably.

I need a button which looks like this: Required Button Shape

However my Button's height and width are in percentage. The only way to do this as far as I could find was border-radius to be half of width (to be specified in pixels) and as my button's width is based on percentage of parent's dimensions i don't the exact value. Putting border-radius as 50% gives a terrible shape. Button with 50% border radius

I came with a JavaScript but it requires an event:

function BorderRadius()
{
    var x=document.getElementsByClassName("LoginButton");
    x[0].style.borderRadius = (x[0].offsetHeight/2).toString()+"px";
}

Is there any way to call this JavaScript function automatically or any other solution, using CSS or JavaScript preferably.

• javascript
• html
• css

• Would you be able to explain why you have set the width and height to be percentages? Seems like an odd thing to do, there may be a better way to handle it. – OrderAndChaos Commented Sep 23, 2018 at 9:55
• @Sara Because its for my college project and the difference in screen sizes has been causing a lot of troubles when using dimensions in pixels and causing the layout to be different than intended – Jainam Doshi Commented Sep 23, 2018 at 10:04
• 1 You might be better off using media queries and creating different sized buttons for a few different screens sizes. – OrderAndChaos Commented Sep 23, 2018 at 10:05
• Though my answer may work, I'd still remend using media queries to change the heights, it gives you another level of control. – OrderAndChaos Commented Sep 23, 2018 at 10:20

3 Answers 3

Though you'll need to test this in a few different browsers setting the border-radius to be greater than the button height will give you the rounded corners that you are looking for, at least it does in Firefox.

div {
  position: relative;
  height: 300px;
}
button {
  width:33%;
  height:10%;
  border-radius: 999px;
}

<div>
<button>Hello</button>
</div>

An alternative might be using Viewport Units instead of percentages. This can be bined with calc() and px values to give you minimum sizes.

Viewport Units:

button {
  width: calc(100px + 15vw);
  height: calc(20px + 5vw);
  border-radius: calc(10px + 2.5vw);
}

<button>Button</button>

Just set the border-radius to fixed value and add line-height with same number.

button {
  border-radius: 20px;
  line-height: 20px;
  background: #ccc;
}

<button>Test button</button>

Sara's answer seems the best solution so far. There is another way too though. I just added onload="BorderRadius()" to the body. It called the function immediately and set the shape.