Which border radius for a round button? - html

Question

I wanna create a responsive button so I cannot use "px" values for the border radius. If I try to use "%" values I never get to the format which I want. Basically the same button but instead of border-radius=100px; something responsive with "%".
Following a snippet.
.button-in-main-box{
background-color: #04AA6D;
border:1px solid ;
height: 15px;
padding: 15px 0;
width: 40%;
border-radius: 100px;
display: block;
text-align: center;
}
<span class = button-in-main-box>Löse Aufgabe</span>

Answer 1

This should work for you border-radius: 5%/100%;
There are more details about it in here: https://www.w3.org/TR/css-backgrounds-3/#the-border-radius

Answer 2

Try using rem. It is responsive tho.
.button-in-main-box{
background-color: #04AA6D;
border:1px solid ;
height: 15px;
padding: 15px 0;
width: 40%;
border-radius: 20rem;
display: block;
text-align: center;
}
<span class = button-in-main-box>Löse Aufgabe</span>

Answer 3

The border-radius property defines the radius of the element's corners and it sometimes take more than one value depending on what you want to achieve,
A simple rule
/* If one value is set, `radius` applies to all 4 corners. */
border-radius: 15px;
/* If two values are set, the first applies to top-left and
bottom-right corner, the second applies to top-right and
bottom-left corner. */
border-radius: 15px 15px;
/* Three values: The second value applies to top-right and
also bottom-left. */
border-radius: 15px 15px 15px;
/* Four values apply to the top-left, top-right, bottom-
right, bottom-left corner */
border-radius: 15px 15px 15px 15px;
Keep in mind that , percentages , refer to corresponding dimension of the border box.
You may specify the value of border-radius in percentages. This is particularly useful when wanting to create a circle or elipse shape,
/* create a circle */
border-radius: 50%;

Answer 4

Try using rem or em unit. Rem is relative to the root font size of your html document while em is relative to the font size of the element or nearest parent.
.button-in-main-box{
background-color: #04AA6D;
border:1px solid ;
height: 15px;
padding: 15px 0;
width: 40%;
border-radius: 6.25rem;
display: block;
text-align: center;
}
<span class = button-in-main-box>Löse Aufgabe</span>

Answer 5

It looks like the value of border-radius depends on the height of the button which includes height + padding.
You may set and use those two value within a css var(--myCssVar) and calc(). It will adapt itself the value to set to border-radius.
examples:
.button-in-main-box {
/* update using css var to calculate border-radius according to height + padding */
--height: 15px;
--padding: 15px;
box-sizing: content-box;/*keep it that way */
height: var(--height);
padding: var(--padding) 0;
border-radius: calc(var(--height) + var(--padding));
/* original op's rules */
background-color: #04AA6D;
border: 1px solid;
width: 40%;
display: block;
text-align: center;
}
<span class="button-in-main-box">Löse Aufgabe</span>
<hr> give it a different height and padding via a reset of CSS var() used
<span class="button-in-main-box" style="--height:30px;--padding:40px">Löse Aufgabe</span> what about font-size and em ?
<span class="button-in-main-box" style="font-size:10px;--height:1.5em;--padding:0.5em">Löse Aufgabe</span>
ressources:
CSS variable
https://developer.mozilla.org/en-US/docs/Web/CSS/var()
The var() CSS function can be used to insert the value of a custom property (sometimes called a "CSS variable") instead of any part of a value of another property.
CSS calc() function
https://developer.mozilla.org/en-US/docs/Web/CSS/calc()
The calc() CSS function lets you perform calculations when specifying CSS property values. It can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed.