CSS border-radius generator

Functies van CSS border-radius generator

• 01

  Uniform en per-hoek modi

  Uniform-modus past één radius op elke hoek toe. Per-hoek-modus regelt linksboven, rechtsboven, rechtsonder en linksonder onafhankelijk — pil-, blad- en asymmetrische tag-vormen zijn slechts een paar klikken weg.

• 02

  Elliptisch (X/Y) hoeken

  Zet elliptische modus aan om een horizontale en verticale radius per hoek op te geven — de syntaxis die CSS ondersteunt voor organische, blob-achtige vormen.

• 03

  Drie eenheden

  Zet tussen px, % en rem. Percentagewaarden creëren echte ellipsen die schalen met het vak; rem-waarden volgen de root font-size voor toegankelijkheid.

Veelgestelde vragen over CSS border-radius generator

Wat is het verschil tussen px en %?

Pixel-radii zijn absoluut — een 16px hoek is altijd 16px. Percentage-radii zijn relatief ten opzichte van de breedte en hoogte van het element, dus 50% creëert een perfecte cirkel op een vierkant vak en een ellips op een rechthoek.

Wanneer zou ik elliptische modus moeten gebruiken?

Gebruik elliptische modus wanneer je een hoek wilt die meer op één as uitpuilt — bijvoorbeeld een horizontale pil (50%/100%) of een blad-achtige blob-vorm. CSS geeft dit uit als `top-left-x top-right-x ... / top-left-y top-right-y ...`.

Waarom ziet mijn percentage-radius verkeerd uit op een niet-vierkant vak?

Percentages op border-radius zijn relatief ten opzichte van de corresponderende zijde: horizontale percentages tot breedte, verticale tot hoogte. Op een breed, kort vak betekent dit dat de hoeken in ellipsen uitrekken, niet perfecte bogen.

Werkt de uitvoer in elke browser?

Ja — border-radius en elliptische syntaxis worden ondersteund in elke moderne browser inclusief alle evergreen versies van Safari, Firefox, Edge en Chrome.