Robo Robok Robo Robok - 10 months ago 49
CSS Question

Round edges on shorter side in CSS

I want to make my text input have rounded edges on the shorter side, which is vertical side. The effect I need looks like this:

border-radius: 9999px;

If I use

border-radius: 50%;
, which makes corders fully round, I get this:

border-radius: 50%;

The effect I need can be achieved by providing some random large number to
and this is what I did:
border-radius: 9999px;

Is there any better way, which doesn't involve fake numbers?


Just use a huge number, e.g.

border-radius: 9999999px;

.horizontal {
  width: 175px;
  height: 50px;
.vertical {
  width: 50px;
  height: 175px;
.box {
  border-radius: 9999999px;
  display: inline-block;
  vertical-align: middle;
  margin: 0 10px;
  background: blue;
<div class="horizontal box"></div>
<div class="vertical box"></div>

It works because, according to the spec,

Corner curves must not overlap: When the sum of any two adjacent border radii exceeds the size of the border box, UAs must proportionally reduce the used values of all border radii until none of them overlap.