Border Radius

border-radius rounds the corners of a box. Each corner becomes the arc of an ellipse instead of a sharp 90° angle — the border, background and clipping all follow the new outline.

Where you meet it

Buttons, cards and input fields — the soft corner is everywhere in modern UI.
Circular avatars and badges: a square plus border-radius: 50%.
"Pill" tags and toggles, where the radius is half the height.

What it does

It carves a curve out of each corner. 0 is a crisp right angle; a larger value scoops a bigger arc. One number rounds all four corners equally; you can also address corners one by one. Small radii read precise and technical, generous ones feel friendly and soft.

50% only makes a circle while the box stays square — stretch it and you get an oval, not a bug.

How it works

The shorthand takes one to four values, running clockwise from the top-left: top-left top-right bottom-right bottom-left. A corner can take two radii — a horizontal and a vertical one — split by a slash, which gives an elliptical (egg-shaped) curve. With %, the horizontal radius is measured against the box width and the vertical against its height.

.box {
  border-radius: 12px;              /* all four corners */
  border-radius: 12px 4px 12px 4px; /* per corner, clockwise */
  border-radius: 50%;               /* square → circle */
  border-radius: 20px / 40px;       /* horizontal / vertical → ellipse */
}

The 50% trick works because each corner's radius reaches the box centre: on a square the four arcs meet and you get a perfect circle. On a wide box the same value stretches into an oval — for a true pill (straight sides, round ends) you need a fixed pixel radius, like half the height.

Watch out

Values are clamped, never invalid: if the radii are too big for the box, the browser scales them down proportionally instead of overlapping.
% scales the curve with the element; px stays fixed. A "circle" only stays round at 50% while the box stays square.
border-radius also clips the background and any overflow: hidden children — handy, but it can crop content you didn't mean to.

Go deeper

border-radius rundet die Ecken einer Box. Jede Ecke wird zum Bogen einer Ellipse statt zu einem scharfen 90°-Winkel — Rahmen, Hintergrund und Clipping folgen der neuen Kontur.

Wo es vorkommt

Buttons, Cards und Eingabefelder — die weiche Ecke ist im modernen UI überall.
Runde Avatare und Badges: ein Quadrat plus border-radius: 50%.
"Pill"-Tags und Toggles, bei denen der Radius die halbe Höhe ist.

Was es tut

Es schneidet aus jeder Ecke eine Kurve heraus. 0 ist ein klarer rechter Winkel; ein größerer Wert hebt einen stärkeren Bogen aus. Eine Zahl rundet alle vier Ecken gleich; du kannst Ecken aber auch einzeln ansprechen. Kleine Radien wirken präzise und technisch, großzügige freundlich und weich.

50% ergibt nur einen Kreis, solange die Box quadratisch bleibt — dehn sie, und du bekommst ein Oval, keinen Fehler.

Wie es funktioniert

Das Shorthand nimmt ein bis vier Werte, im Uhrzeigersinn ab oben-links: oben-links oben-rechts unten-rechts unten-links. Eine Ecke kann zwei Radien tragen — einen horizontalen und einen vertikalen — getrennt durch einen Schrägstrich, was eine elliptische (eiförmige) Kurve ergibt. Bei % bezieht sich der horizontale Radius auf die Box-Breite, der vertikale auf die Höhe.

.box {
  border-radius: 12px;              /* alle vier Ecken */
  border-radius: 12px 4px 12px 4px; /* pro Ecke, im Uhrzeigersinn */
  border-radius: 50%;               /* Quadrat → Kreis */
  border-radius: 20px / 40px;       /* horizontal / vertikal → Ellipse */
}

Der 50%-Trick funktioniert, weil der Radius jeder Ecke bis zur Box-Mitte reicht: Bei einem Quadrat treffen sich die vier Bögen und es entsteht ein perfekter Kreis. Bei einer breiten Box wird derselbe Wert zu einem Oval — für eine echte Pille (gerade Seiten, runde Enden) brauchst du einen festen Pixel-Radius, etwa die halbe Höhe.

Worauf achten

Werte werden begrenzt, nie ungültig: Sind die Radien zu groß für die Box, skaliert der Browser sie proportional herunter, statt sie überlappen zu lassen.
% skaliert die Kurve mit dem Element; px bleibt fest. Ein "Kreis" bleibt nur bei 50% rund, solange die Box quadratisch bleibt.
border-radius beschneidet auch den Hintergrund und overflow: hidden-Kinder — praktisch, kann aber Inhalt abschneiden, den du nicht meintest.