Werking van de CSS Border Radius Generator
Met deze tool kan de afronding van de hoeken van een box nauwkeurig worden ingesteld. De hoeken kunnen individueel worden aangepast of aan elkaar worden gekoppeld, waarbij er keuze is tussen de eenheden pixels en percentages. Daarnaast beschikt de tool over een elliptische modus om zachtere, organische vormen te creëren door elke hoek te voorzien van een afzonderlijke horizontale en verticale straal. De generator schrijft direct de bijbehorende CSS-code voor het ontwerp.
De initiële waarde van de schuifregelaar is ingesteld op 24, wat resulteert in de CSS-code border-radius: 24px;. Aanpassingen worden direct visueel weergegeven in een preview die de box met de toegepaste afrondingen toont.
De invoeropties en instellingen
De interface biedt verschillende schuifregelaars en schakelaars om de vorm van de box te bepalen:
- Schuifregelaars: Deze regelaars hebben een bereik van 0 tot 100. De werking is afhankelijk van de gekoppelde status en de geselecteerde modus:
- Wanneer de hoeken gekoppeld zijn via de optie Koppel alle hoeken, regelt één enkele schuifregelaar met het label Alle hoeken alle vier de hoeken tegelijk.
- Wanneer de hoeken niet gekoppeld zijn, zijn er vier afzonderlijke schuifregelaars beschikbaar met de labels Linksboven, Rechtsboven, Rechtsonder en Linksonder. Deze schuifregelaars mappen met de klok mee.
- In de elliptische modus krijgt elke hoek daarnaast een schuifregelaar voor Horizontaal en Verticaal.
- Eenheid: Een selector om te wisselen tussen de eenheden px (pixels) en % (procent).
- Elliptische hoeken: Een schakelaar om de elliptische modus in of uit te schakelen.
- Presets: Knoppen waarmee direct een vooraf ingestelde vorm kan worden toegepast. De beschikbare opties zijn:
- Scherp
- Afgerond
- Cirkel (stelt alle hoeken in op 50%)
- Blob
- Blad
Onder de sectie met de titel CSS wordt de gegenereerde code getoond, die met de knop Kopieer CSS direct naar het klembord kan worden gekopieerd.
Verschillen tussen pixels en percentages
De keuze tussen pixels en percentages heeft invloed op hoe de afronding zich verhoudt tot de afmetingen van het element:
| Eenheid | Gedrag van de afronding |
|---|---|
| Pixels (px) | De hoek rondt af met een vaste, absolute waarde. |
| Percentages (%) | De hoek rondt af relatief ten opzichte van de box. Een horizontaal percentage volgt de breedte en een verticaal percentage volgt de hoogte van het element. |
Door de hoeken te koppelen, de eenheid op procenten in te stellen en de waarde op 50% te zetten, verandert een perfect vierkant element in een exacte cirkel. Dit principe kan ook direct worden toegepast via de preset Cirkel.
Werken met de elliptische modus
Wanneer de optie Elliptische hoeken is uitgeschakeld, is elke hoek een kwartcirkel die wordt gedefinieerd door een enkele straal (radius). Zodra de elliptische modus wordt ingeschakeld, krijgt elke hoek een aparte horizontale en verticale straal. Dit maakt het mogelijk om asymmetrische, vloeiende vormen te ontwerpen, zoals organische "blobs".
De generator past de CSS-output automatisch aan op basis van de actieve modus. Bij een actieve elliptische modus schrijft de tool de CSS-notatie met een schuine streep (de "slash-notatie") om de horizontale en verticale waarden van elkaar te scheiden. Zodra de hoeken weer symmetrisch rond worden gemaakt en de elliptische modus wordt uitgeschakeld, valt de code automatisch terug naar de kortere standaardnotatie.
Praktische toepassingen in CSS-ontwerp
De generator is ontworpen voor verschillende specifieke scenario's in webdesign:
- Pill-vormige knoppen: Om een knop met volledig afgeronde zijkanten (een pilvorm) te maken, moeten de hoeken in pixels worden ingesteld. Door een hoekregelaar voorbij de helft van de hoogte van de knop te slepen, blijven de zijkanten bij elke breedte volledig afgerond zonder dat de vorm vervormt.
- Perfecte cirkels: Dit wordt gerealiseerd door een vierkant element te voorzien van een afronding van 50% op alle hoeken.
- Organische vormen: Door gebruik te maken van de elliptische modus kunnen ontwerpers unieke, niet-geometrische achtergrondelementen genereren die afwijken van standaard rechthoeken.
Privacy en verwerking
Elke hoek wordt direct in je browser getekend. Niets van wat je hier instelt, wordt geüpload naar BroBroGo. De verwerking en het genereren van de CSS-code vinden volledig lokaal plaats op het apparaat van de gebruiker.
Veelgestelde vragen
Hoe werken de vier hoeken en px versus %? De vier schuifregelaars horen met de klok mee bij linksboven, rechtsboven, rechtsonder en linksonder. In pixels rond je een hoek af met een vaste waarde; in procenten rond je af relatief ten opzichte van de box — een horizontaal percentage volgt de breedte en een verticaal percentage volgt de hoogte, waardoor 50% een vierkant in een cirkel verandert.
Wat doet de elliptische modus? Als dit uit staat, is elke hoek een kwartcirkel met een enkele straal (radius). Zet je het aan, dan krijgt elke hoek een aparte horizontale en verticale straal. Zo maak je zachte, organische "blob"-vormen. De generator schrijft de schuine-streepnotatie met twee waarden voor je en valt terug op de korte vorm zodra de hoeken weer rond zijn.
Hoe maak ik een perfecte cirkel of een pilvorm? Koppel de hoeken, schakel over naar procenten en stel deze in op 50%: een vierkant verandert in een cirkel. Voor een pilvormige knop behoud je pixels en sleep je een hoek voorbij de helft van de hoogte van de knop — de zijkanten blijven dan bij elke breedte volledig afgerond. De Cirkel-preset stelt dit met één klik voor je in.