I am looking to adjust the border-radius of a div based on its dimensions without creating an elliptical or pill shape effect. For instance, if a div has a width and height of 250px and 35px respectively, the border-radius should be set to 7px. Similarly, for a div with dimensions of 280px by 70px, the border-radius should be 15px, always being 20% of the height but maintaining circular rounding. Additionally, in another section of the website, I want the border radius to be equal to min(width, height)/5. How can I achieve this without relying on JavaScript?
In each case, the width and height values are variable. Currently, my solution involves specifying a fixed border-radius for elements that don't follow the default sizes, which limits their ability to resize.
.box {
width: 250px;
height: 35px;
border-radius: 7px;
background-color: black;
color: white;
line-height: 35px;
text-align: center;
margin: 5px auto;
}
.two {
width: 280px;
height: 70px;
border-radius: 14px;
line-height: 70px;
}
.three {
border-radius: 20%;
}
.four {
border-radius: 999px;
}
.five {
/* calculated from initial values, note that they are wrong with the larger size */
border-radius: 2.8%/20%;
width: 280px;
height: 70px;
line-height: 70px;
}<div class="box one">yes</div>
<div class="box two">yes</div>
<div class="box three">no</div>
<div class="box four">no</div>
<div class="box five">no</div>