Perfectly rouded border-radius for flexbox items

Question

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!

Welcome to SO. Can you please add html code to make a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) — Rayees AC, Sep 14 '20 at 08:05
Hello! Please add your HTML so we can show you a specified solution and reconstruct your attempt — Warden330, Sep 14 '20 at 08:06

Hao Wu · Accepted Answer · 2020-09-14T08:41:18.250

3

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.

edited Sep 14 '20 at 08:41

answered Sep 14 '20 at 08:09

Hao Wu

17,573
6
28
60

Sadly this won't work because width of my items are not static – eckler Sep 14 '20 at 08:26
2

@eckler Just give it a big number that your item will never surpass, even something like `9999px`. It'll automatically become a round shape, but don't go too crazy. – Hao Wu Sep 14 '20 at 08:28
Thanks! That works just fine. Add this info to your answer please so I could mark it as a decision. – eckler Sep 14 '20 at 08:38
@eckler Just added this info, hope it helps. – Hao Wu Sep 14 '20 at 08:42

Perfectly rouded border-radius for flexbox items

1 Answers1

Linked