Border Radius Generator
Design CSS-kantradius visuelt: fire uavhengige hjørneglidere i px eller prosent, en lenke-alle-hjørner-snarvei for øyeblikkelige sirkler og piller, pluss en organisk blob-modus med randomiserte former.
Resultat
En kant-radius-deklarasjon kan ta opptil fire uavhengige hjørneverdier pluss en valgfri skråstreksyntaks med åtte verdier for organiske kurver – flere bevegelige deler enn de fleste er klar over før de trenger noe utover et enkelt avrundet kort. Denne generatoren setter hver og en av disse delene på skjermen: fire hjørneglidere med hver sin px-eller-prosent-enhet, en link-alle-hjørner-snarvei for symmetriske former og en blob-modus for figurer som ingen enkelt radiusverdi kan uttrykke.
Hjørnemodus dekker formene folk faktisk strekker seg etter: koble hvert hjørne til én glidebryter for perfekte sirkler, piller og squircles, eller koble dem fra for å runde bare toppen av et rullegardinpanel eller bare én side av et kort. En sjakkbrettforhåndsvisning bak formen, som kan byttes mellom et lyst og mørkt bakteppe, gjør det åpenbart nøyaktig hvilke hjørner som blir klippet bort i en hvilken som helst radius - de samme visuelle triksfilverktøyene på dette nettstedet bruker for å vise gjennomsiktighet.
Blob-modus er den andre halvdelen: CSS åtte-verdi skråstreksyntaksen lar de horisontale og vertikale radiene til hvert hjørne være uenige, noe som gjør et avrundet rektangel til en organisk, uregelmessig kontur. Trykk Randomize for en ny form når som helst og kopier den nøyaktige CSS-en bak den – ingen SVG-eksport eller eksternt bibliotek involvert. Forhåndsinnstilte sider dekker forespørslene folk faktisk skriver inn i en søkeboks: en perfekt sirkel, en stadionformet pilleknapp, en iOS-lignende squircle og en ferdig organisk blob.
Som alle verktøy på dette nettstedet, kjører det helt i nettleseren din: ingen opplasting, ingen konto, og generatoren fortsetter å jobbe offline når siden har lastet inn.