CSS-border-radius-generator

Wat is CSS-border-radius-generator?

De CSS-border-radius-generator is een gratis visuele editor voor de CSS-eigenschap border-radius, gemaakt voor front-endontwikkelaars en ontwerpers. Gebruik de schuifregelaars en getalvelden om de horizontale en verticale radius van elke hoek in pixels in te stellen, kies een eenheid en zet de elliptische modus aan voor de slash-syntaxis van ovale hoeken. Een voorbeeldvak toont de afgeronde vorm in realtime en de compacte verkorte declaratie wordt voor je gegenereerd om te kopiëren. Kies een preset zoals Afgerond, Pil, Cirkel of een organische Blob in de segmentbesturing om snel te starten en verfijn daarna elke hoek. Gebruik het om zachte kaarten, pilknoppen, perfecte cirkels, squircles en druppelvormige decoratieve vormen te ontwerpen zonder de hoekvolgorde uit je hoofd te leren.

CSS-border-radius-generator gebruiken

1. Kies een preset (Afgerond, Pil, Cirkel of Blob) in de segmentbesturing om een startvorm te laden.
2. Sleep de schuifregelaar van elke hoek of typ een getal om de horizontale radius van die hoek in te stellen.
3. Zet Elliptisch aan om per hoek een tweede verticale radius te tonen en ovale hoeken te maken met de slash-syntaxis.
4. Kies de eenheid (px of %) in de instellingen; percentages schalen de radius mee met de boxgrootte.
5. Bekijk hoe het live voorbeeld bijwerkt en kopieer de gegenereerde verkorte border-radius naar je stylesheet.

Voorbeelden

Alle vier de hoeken 16, elliptisch uit

border-radius: 16px;

Preset Pil, alle hoeken 9999

border-radius: 9999px;

LB 40/20, RB 10, RO 40/20, LO 10, elliptisch aan

border-radius: 40px 10px 40px 10px / 20px 10px 20px 10px;

Veelgestelde vragen

In welke volgorde staan de vier hoeken?

De verkorte notatie noemt de hoeken met de klok mee, beginnend linksboven: linksboven, rechtsboven, rechtsonder, linksonder. Deze tool geeft de vier waarden altijd in die volgorde, zodat het resultaat ondubbelzinnig is en achteraf makkelijk met de hand aan te passen.

Wat doet de elliptische modus?

Border-radius kan per hoek een horizontale en een verticale radius aannemen, gescheiden door een slash, om ovale (elliptische) in plaats van ronde hoeken te tekenen. Zet Elliptisch aan om per hoek een tweede verticale radius in te stellen; de uitvoer gebruikt dan de slash-syntaxis 'horizontaal / verticaal'.

Moet ik px of procent gebruiken?

Pixels geven een vaste hoekgrootte, los van de box. Percentages zijn relatief aan de breedte en hoogte van de box, dus 50% op elke hoek maakt van een vierkant een perfecte cirkel en de afronding schaalt mee als het element van grootte verandert. Wissel de eenheid in de instellingen.

Hoe maak ik een perfecte cirkel of een pil?

Kies de preset Cirkel (50% op elke hoek) voor een cirkel uit een vierkant, of de preset Pil (een zeer grote pixelradius) zodat de korte zijden volledige halve cirkels worden. Je kunt ook vanaf een preset starten en losse hoeken verfijnen.

Worden mijn gegevens ergens geüpload?

Nee. De generator draait volledig in je browser met JavaScript — je radiuswaarden worden nooit naar een server gestuurd, dus hij werkt privé en zelfs offline zodra de pagina is geladen.