devShakib

Loading devShakib…

Border-Radius

Round corners individually or together with a live preview. Free, runs entirely in your browser — no signup, and nothing you paste in is uploaded.

The shorthand takes up to four values running clockwise from the top-left, and the slash form takes eight — four horizontal radii and four vertical — which is how you get elliptical corners rather than circular ones. That second form is the whole trick behind organic blob shapes made from a single div.

One behaviour worth expecting: when adjacent radii add up to more than the side they share, the browser scales all of them down proportionally rather than overlapping. So a very large radius on a short element quietly becomes a pill, and no value above half the shorter side changes anything.