Border Radius Generator

En border-radius deklaration kan tage op til fire uafhængige hjørneværdier plus en valgfri otte-værdi skråstreg-syntaks til organiske kurver – flere bevægelige dele end de fleste er klar over, indtil de har brug for noget ud over et simpelt afrundet kort. Denne generator sætter hver eneste af disse dele på skærm: fire hjørneskydere med deres egen px-eller-procent enhed, en ’link alle hjørner’-genvej til symmetriske former, og en blob-tilstand til former som ingen enkelt radiusværdi kan udtrykke.

Hjørnetilstand dækker de former, folk rent faktisk griber efter: link alle hjørner til én skyder for perfekte cirkler, piller og squircles, eller frakobl dem for kun at afrunde toppen af et dropdown-panel eller kun den ene side af et kort. En skakternet forhåndsvisning bag formen, der kan skiftes mellem en lys og mørk baggrund, gør det tydeligt, præcis hvilke hjørner der bliver klippet væk ved en given radius – det samme visuelle trick som fil-værktøjerne på dette site bruger til at vise gennemsigtighed.

Blob-tilstand er den anden halvdel: CSS’s otte-værdi skråstreg-syntaks tillader de vandrette og lodrette radier i hvert hjørne at være forskellige, hvilket er det, der forvandler et afrundet rektangel til en organisk, uregelmæssig kontur. Klik på ’Tilfældig’ for en frisk form når som helst, og kopier den præcise CSS bag den – ingen SVG-eksport eller eksternt bibliotek involveret. Forudindstillede sider dækker de forespørgsler, folk rent faktisk skriver i en søgeboks: en perfekt cirkel, en stadion-formet pilleknap, en iOS-agtig squircle og en færdiglavet organisk blob.

Som ethvert værktøj på dette site kører det helt i din browser: ingen upload, ingen konto, og generatoren fortsætter med at fungere offline, når siden først er indlæst.