Elke hoek heeft twee radiussen, niet één

border-radius neemt tot acht waarden, geschreven als linksboven rechtsboven rechtsonder linksonder / linksboven rechtsboven rechtsonder linksonder. De set voor de slash is de horizontale radius van elke hoek en de set erna de verticale. Met één set is elke hoek een kwartcirkel. Met allebei is elke hoek een kwartellips, en dat is het hele mechanisme achter de organische blobvormen die mensen elders als vier aparte regels genereren.

De verkorte schrijfwijze klapt precies zo in als bij margin: één waarde voor alle vier de hoeken, twee voor de diagonale paren, drie als alleen de twee zijhoeken gelijk zijn, en anders vier. Deze generator schrijft altijd de kortste schrijfwijze die hetzelfde betekent, want 6px is wat een mens schrijft en 6px 6px 6px 6px is wat een tool schrijft.

Dezelfde radius oogt anders op een knop dan op een kaart

Een radius wordt gelezen ten opzichte van de rand waar hij op zit. 12px op een knop van 36px hoog eet een derde van de hoogte op en leest als een pil die niet is doorgezet; diezelfde 12px op een kaart van 320px is een nauwelijks zichtbare verzachting. Daarom laat het voorbeeld hierboven één waarde op drie maten tegelijk zien. Designsystemen lossen het op met een schaal in plaats van één getal: zoiets als 4px voor invoervelden, 6px tot 8px voor kaarten, en een aparte volledig ronde waarde voor pillen en avatars.

Voor geneste vlakken is de regel simpel: de binnenradius hoort de buitenradius min de tussenruimte te zijn. Een kaart van 16px met daarin een afbeelding van 16px en 8px opvulling laat een zichtbare snipper kaart tussen de twee bochten. De afbeelding wil 8px.

Percentages, pillen en de schaalregel

Een radius in procenten wordt tegen het vlak gemeten: de horizontale radius tegen de breedte en de verticale tegen de hoogte. 50% op een vierkant is dus een cirkel en 50% op een brede knop is een ellips waarvan de uiteinden uitbollen naarmate het label groeit. Gebruik in plaats daarvan een grote vaste lengte, meestal 9999px, en de uiteinden blijven op elke breedte halve cirkels. Dat is wat de preset Pil oplevert.

Niets hier begrenst een radius op de helft van het vlak, want de specificatie regelt dat al. Tellen de radiussen op één rand samen op tot meer dan de lengte van die rand, dan berekent de browser uit de slechtste rand één schaalfactor f en vermenigvuldigt daar elke radius mee, zodat de bochten samen krimpen en elkaar nooit overlappen. Daarom is 9999px veilig in plaats van kapot, en daarom is een element waarvan alle hoeken op 50% staan een cirkel en geen afgeknipte rommel.

Veelvoorkomende problemen

De vierkante hoeken van het kind steken uit de afgeronde ouder. Een radius knipt de achtergrond en de rand af, niet de inhoud. Zet overflow: hidden op de ouder, of geef het kind de bijpassende binnenradius.
Een tabel is zijn afgeronde hoeken kwijt.border-collapse: collapse gooit ze weg. Gebruik border-collapse: separate met border-spacing: 0, en rond de eerste en laatste cel van de eerste en laatste rij af.
De afgeronde rand ziet er wazig of korrelig uit. Een radius op een vlak dat ook een achtergrondafbeelding of een verloop heeft wordt per browser anders anti-aliased. Een haarlijn in dezelfde tint als de achtergrond verbergt het meestal.
De hoek is geen echte squircle. Dat kan ook niet. border-radius tekent alleen kwartellipsen, dus de doorlopende bocht van iOS-iconen is er niet mee uit te drukken. De preset Squircle is de beste benadering die de property toelaat; een echte superellips vraagt een SVG-pad of corner-shape, en dat is nog nieuw.

Veelgestelde vragen

Welke eenheid moet ik gebruiken?

Pixels voor bijna alles: een radius is een fysiek detail van de vorm en hoort niet te groeien omdat iemand zijn lettergrootte omhoog zette. Gebruik rem als je designsysteem zijn hele geometrie met de letter meeschaalt. Gebruik een percentage alleen als je wilt dat de bocht het vlak volgt, en dat betekent in de praktijk cirkels en blobs.

Waarom verandert de Tailwind-uitvoer soms van vorm?

Ronde hoeken komen eruit als rounded-[…] met underscores voor spaties. Elliptische hoeken komen er in plaats daarvan uit als de arbitraire property [border-radius:…], want Tailwind leest een slash na een arbitraire waarde als een dekkingsmodifier en de syntaxis met acht waarden heeft er middenin een. Allebei compileren ze naar de declaratie die ernaast staat.

Kan ik maar één hoek afronden?

Ja. Zet Alle hoeken koppelen uit en zet de andere drie op nul. De losse properties border-top-left-radius en zijn drie broertjes bestaan ook, en elk daarvan neemt eveneens twee waarden voor een elliptische hoek.

Kost een radius iets om te tekenen?

Op zichzelf vrijwel niets. Het wordt meetbaar zodra het een nieuwe tekenlaag afdwingt, meestal in combinatie met overflow: hidden op een scrollende container, waar de browser elk frame tegen de bocht moet afknippen.