CSS hörnradius-generator
Skapa en border-radius-förkortning från individuella hörnvärden, med elliptiska hörn och Tailwind-motsvarighet.
CSS hörnradius-generator
Ange en radie för varje hörn och detta verktyg sätter tillsammans rätt CSS border-radius för dig, förkortat till den kortaste giltiga notationen — ett värde när alla fyra hörn matchar, två eller tre när motsatta hörn upprepas, och hela fyravärdelistan när varje hörn är olika. Det är gjort för alla som formar kort, knappar, avatarer, modaler eller inmatningsfält som vill ha ren, kopierbar CSS utan att göra hörnmatte för hand.
Välj "Samma på alla hörn" för en enkel avrundad rektangel, eller byt till "Separata hörn" för att justera varje hörn oberoende i px, procent eller rem. Om du slår på elliptiska hörn läggs åttstrecks snedstrecksnotationen till som border-radius stöder — en horisontell radie och en distinkt vertikal radie per hörn, driven av en skjutreglage så att en squircle eller en tillplattad pillerform tar ett drag istället för åtta fält. Alternativet "Slumpmässig organisk blob" genererar en ny asymmetrisk form vid varje körning — den typ av mjuk, oregelbunden kontur som används bakom hjältebilder och dekorativa blobbar. Byt mellan border-radius förkortningen och de fyra utökade border-*-radius egenskaperna, och slå på Tailwind-alternativet för att få den motsvarande godtycklig-värdeklassen tillsammans med vanlig CSS.
Värden valideras när du skriver: negativa tal behandlas som noll och det finns inget tillstånd som producerar bruten CSS. Den live-räknaren under utmatningen rapporterar hur många deklarationsrader som genererades, hur många distinkta hörnvärden förkortningen kollapsades till, och det exakta teckenaantalet, uppdaterat när du justerar något alternativ.
Allt körs lokalt i din webbläsare — inget hörnvärde eller genererad CSS skickas någonsin någonstans. Kopiera resultatet, ladda ned det som en .txt-fil, eller skicka det direkt till en annan verktygs inmatning för att fortsätta arbeta med det.