Perfectly rouded border-radius for flexbox items

user_12143447 0
Viewed 1329

I have items like these which are flex-items inside a flexbox container.

My items in normal size:

My items squeezed:

My CSS looks like this:

body { 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.container {
  display: flex;
  align-items: flex-start;
  justify-content:space-between;
  width: 100%;
  position:relative;
}

.item {
 display: inline-flex;
 align-items: flex-end;
 justify-content: center;
 flex: 1 0;
 height: 2.4rem;
 border: 1px solid #000;
 border-radius: 0 0 50% 50%; /* Important part */
 padding-bottom: 10px; 
 user-select: none;
 font-size: 0.9rem;
 height: 250px; 
 margin: 0 5px;
}
.info {
  margin-top: 150px;
}
<div class='container'>
  <div class='item'>1</div>
  <div class='item'>2</div>
  <div class='item'>3</div>
  <div class='item'>4</div>
  <div class='item'>5</div>
</div>

Is there a way to make them look perfectly rounded (RadiusX == RadiusY, not ellipsed) in every size? Thank you in advance!

border-radius flexbox css
1 Answers

Don't assign 50% to border-radius, it'll calculate exactly from the percentage of both width and height(in this situation, 40px/80px). If the width and height are not equal, it will end up an ellipse shape.

Just use an arbitrary big number instead.

You don't need to calculate exactly what the number it is, just make it bigger than the width or height could be(In this example, 500px is more than enough for 160px height, but don't be too crazy about it):

div {
  width: 80px;
  height: 160px;
  display: inline-block;
  margin-right: 10px;
}

.fifty-percent {
  border-radius: 0 0 50% 50%;
  background-color: salmon;
}

.big-number {
  border-radius: 0 0 500px 500px;
  background-color: steelblue;
}
<div class="fifty-percent">50%</div>
<div class="big-number">500px</div>

You can see this article to see how border-radius works and this article to see how exactly border-radius is calculated.

user_102892650
Related