Robo Robok Robo Robok - 1 year ago 81
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?

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download