CSS border-radius-generator
Genereer een border-radius-verkorting van afzonderlijke hoekwaarden, met elliptische hoeken en Tailwind-equivalent.
CSS border-radius-generator
Voer een straal in voor elke hoek en deze tool assembleert de juiste border-radius CSS voor u, verkort tot de kortst mogelijke notatie — één waarde wanneer alle vier hoeken hetzelfde zijn, twee of drie wanneer tegenovergestelde hoeken hetzelfde zijn, en de volledige vierwaardenlijst wanneer elke hoek anders is. Het is ontworpen voor iedereen die kaarten, knoppen, avatars, dialoogvensters of invoervelden vormgeeft en schoon, kopieerbaar CSS zonder handmatige hoekberekeningen wil.
Kies 'Gelijk op alle hoeken' voor een eenvoudige rechthoek met afgeronde hoeken, of switch naar 'Afzonderlijke hoeken' om elke hoek onafhankelijk in px, procent of rem in te stellen. Het inschakelen van elliptische hoeken voegt de schuinstreepnotatie met acht waarden toe die border-radius ondersteunt — een horizontale straal en een afzonderlijke verticale straal per hoek, aangestuurd door een schuifregelaar zodat een squircle of afgevlakte pilletjes vorm met één verplaatsing in plaats van acht velden ontstaat. De optie 'Willekeurige organische blob' genereert elke run een verse asymmetrische vorm — het soort zachte, onregelmatige omtrek dat wordt gebruikt achter heroafbeeldingen en decoratieve blobs. Schakel tussen de border-radius verkorting en de vier uitgebreide border-*-radius eigenschappen, en zet de Tailwind optie aan om de bijbehorende arbitraire-waardenklasse naast de normale CSS te krijgen.
Waarden worden gevalideerd terwijl u typt: negatieve getallen worden als nul behandeld en er is geen toestand die ongeldig CSS produceert. De live tally onder de output toont hoeveel declaratieregels zijn gegenereerd, op hoeveel verschillende hoekwaarden de verkorting werd teruggebracht, en het exacte tekenental, bijgewerkt terwijl u elke optie aanpast.
Alles wordt lokaal in uw browser uitgevoerd — geen hoekwaarde of gegenereerde CSS wordt ooit ergens heen verzonden. Kopieer het resultaat, download het als .txt bestand, of stuur het rechtstreeks naar de invoer van een ander hulpmiddel om ermee door te gaan.