Border-radius-generator

En border-radius-deklarasjon kan ta opptil fire uavhengige hjørneverdier pluss en valgfri syntaks med åtte verdier og skråstrek for organiske kurver – flere bevegelige deler enn de fleste er klar over før de trenger noe utover et enkelt avrundet kort. Denne generatoren legger hver eneste av disse delene på skjermen: fire hjørneglidebrytere med sine egne px- eller prosentenheter, en snarvei for å koble alle hjørner for symmetriske former, og en blob-modus for former ingen enkelt radiusverdi kan uttrykke.

Hjørnemodus dekker formene folk faktisk griper etter: koble hvert hjørne til én glidebryter for perfekte sirkler, piller og squircles, eller løsne dem for å runde kun toppen av et nedtrekkspanel eller kun én side av et kort. En sjakkbrett-forhåndsvisning bak formen, som kan byttes mellom lys og mørk bakgrunn, gjør det tydelig nøyaktig hvilke hjørner som blir klippet bort ved en gitt radius – det samme visuelle trikset filverktøyene på dette nettstedet bruker for å vise gjennomsiktighet.

Blob-modus er den andre halvdelen: CSS-syntaksen med åtte verdier og skråstrek lar de horisontale og vertikale radiene til hvert hjørne være forskjellige, noe som gjør et avrundet rektangel om til en organisk, uregelmessig omriss. Trykk Tilfeldig for en ny form når som helst og kopier den nøyaktige CSS-en bak – ingen SVG-eksport eller eksternt bibliotek involvert. Forhåndsinnstillingssider dekker forespørslene folk faktisk skriver inn i en søkeboks: en perfekt sirkel, en stadionformet pilleknapp, en iOS-aktig squircle og en ferdiglaget organisk blob.

Som alle verktøy på dette nettstedet kjører det fullstendig i nettleseren din: ingen opplasting, ingen konto, og generatoren fortsetter å fungere uten nett når siden først er lastet.