Single radius `border-radius` as percent of specific side

Question

I need the border-radius of a div to change based on the dimensions of the div - but not to go elliptical, or form a pill shape. For example, a div with a width,height of 250,35 should have a border-radius of 7px, while one of 280,70 should have a border-radius of 15px - always 20% of the height, but always using the circular rounding. In another section of the website I need the border radius to equal min(width, height)/5. How can I accomplish this without JavaScript?

In all cases the width and height are arbitrary. My current solution is to require an explicit border-radius on elements which do not follow the default sizes, which would not permit resizing.

.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>

Answer 1

Short answer, you can't do min(width, height) / 5, but using calc(), like in this sample, might be a way to get as close as possible to what you want without script?

.box {
  width: 250px;
  height: 35px;
  border-radius: calc(35px * 0.2) / calc(35px * 0.2);
  background-color: black;
  color: white;
  line-height: 35px;
  text-align: center;
  margin: 5px auto;
}
.two {
  width: 280px;
  height: 70px;
  border-radius: calc(70px * 0.2) / calc(70px * 0.2);
  line-height: 70px;
}

<div class="box one">yes</div>
<div class="box two">yes</div>

Where the border-radius can be shortened to

  border-radius: calc(35px * 0.2);

  border-radius: calc(70px * 0.2);