Wat is CSS border-radius?

CSS border-radius rondt de hoeken van het randvak van een element af. Het accepteert een tot vier waarden die de radius van elke hoek specificeren. Je kunt cirkels, ellipsen, pill-vormen en complexe organische curves maken.

Verschil tussen de border-radius shorthand en individuele hoekeigenschappen?

De shorthand accepteert 1-4 waarden in wijzerzin. Individuele eigenschappen (border-top-left-radius, etc.) staan twee waarden toe voor asymmetrische elliptische hoeken.

Hoe maak ik een perfecte cirkel met border-radius?

Stel border-radius in op 50% op een vierkant element. Omdat percentagewaarden relatief zijn aan de afmetingen, creëert 50% in elke richting een ellips — een cirkel wanneer breedte gelijk is aan hoogte.

Wat zijn elliptische border-radius waarden?

border-radius kan twee waarden per hoek accepteren gescheiden door een schuine streep, die horizontale en verticale radii onafhankelijk definiëren: `border-radius: 50px / 25px`.

Beïnvloedt border-radius het klikgebied of overflow?

border-radius rondt alleen het visuele uiterlijk af. Om inhoud bij de hoeken af te knippen, voeg overflow: hidden toe.

Hoe gebruik ik border-radius in een design system?

Design systems definiëren radius-tokens: --radius-sm (4px), --radius-md (8px), --radius-lg (16px), --radius-full (9999px).

Wordt border-radius ondersteund in alle browsers?

border-radius wordt ondersteund in alle moderne browsers sinds IE9. Geen vendor-prefixen nodig.

Border Radius
Generator

Genereer CSS border-radius waarden met live voorbeeld. Bedien elke hoek onafhankelijk of vergrendel ze samen voor uniforme afronding.

Alle 4 hoekenVergrendelen / ontgrendelenCSS-ready

① Versleep de schuifregelaars voor de straal ② Vergrendel hoeken voor uniformiteit ③ Kopieer de CSS

Voorinstellingen

Linksboven: 20px

Rechtsboven: 20px

Linksonder: 20px

Rechtsonder: 20px

Gegenereerde CSS

border-radius: 20px;

Individuele hoeken

CSS border-radius accepteert tot 4 waarden voor elke hoek onafhankelijk: linksboven, rechtsboven, rechtsonder, linksonder (met de klok mee).

Verkorte notatie

Als alle hoeken gelijk zijn, wordt één waarde uitgevoerd. CSS ondersteunt ook elliptische stralen met de "/"-syntax.

Eenheden

Border-radius accepteert px (absoluut), % (relatief aan elementgrootte) en andere lengte-eenheden. 50% op een vierkant maakt een perfecte cirkel.

CSS border-radius — hoeken, vormen en browserondersteuning

De CSS-eigenschap border-radius rondt de hoeken van een element af. Het accepteert tot vier waarden met de klok mee met px, %, em of rem. border-radius: 50% op een vierkant maakt een perfecte cirkel; border-radius: 9999px maakt een pilvorm. De slash-syntax (border-radius: 50px / 25px) definieert elliptische hoeken. Om afbeeldingen bij te snijden, voeg overflow: hidden toe. Ondersteund in alle moderne browsers sinds CSS3. In Figma de waarden direct in de hoekstraalvelden plakken.

Veelgestelde vragen

De CSS-eigenschap border-radius rondt de hoeken van het border-box van een element af. Het accepteert 1–4 lengtewaarden (px, %, em) voor elke hoek met de klok mee.

1 waarde: alle hoeken gelijk. 2 waarden: LB/RO en RB/LO. 3 waarden: LB, RB/LO, RO. 4 waarden: LB, RB, RO, LO. Als alle vier gelijk zijn, geeft de generator één waarde uit.

Pixelwaarden geven absolute hoekgroottes. Percentages zijn relatief aan de elementafmetingen — 50% maakt een cirkel als het element vierkant is.

Stel border-radius: 50% in op een vierkant element. Voor rechthoekige elementen maakt border-radius: 50% / 50% een ellips.

Border-radius heeft minimale impact op statische elementen. Het animeren kan repaints veroorzaken. Border-radius met transform op de GPU-laag is performanter.

In Figma wordt border-radius per hoek ingesteld in het ontwerppaneel. In Sketch via de hoekstraalhendels. Beide ondersteunen gemixte hoekstralen.

Border-radius werkt op de meeste HTML-elementen. Bij img is overflow: hidden vereist om de afbeelding bij te snijden.

CSS border-radius — hoeken, vormen en browserondersteuning

Veelgestelde vragen

Ontdek ons netwerk