⭐ 0
🔍
Text Bild PDF och dokument Ljud Musik Elektronik Tid Verktyg Validatorer Esoterik Spel

CSS Pill / Stadium Shape Generator

Designa CSS-kantradie visuellt: fyra oberoende hörnreglage i px eller procent, en genväg för alla hörn för direkta cirklar och piller, plus ett organiskt blobläge med slumpmässiga former.

12px
12px
12px
12px
Bearbetar... 0%

Resultat

Den här sidan öppnar kant-radiegeneratorn med alla fyra hörn länkade och skjutna till en mycket stor radie: 999px. På en typisk rektangel i knappstorlek klipps en så stor radie av webbläsaren till exakt halva lådans höjd, vilket är det som ger det helt rundade pillret eller stadionformen snarare än en fyrkant med lätt rundade hörn.

Det är därför pillerknappar inte behöver ett exakt radievärde som är avstämt till varje knapps höjd – vilket tal som helst som är bekvämt större än halva höjden ger det identiska klippta resultatet, vilket också är anledningen till att 999px (eller till och med 9999px) har blivit den informella community-stenografin för "runda detta hela vägen" i CSS.

Ändra storlek på rutan i din egen layout och samma 999px fortsätter att producera ett helt piller på vilken höjd som helst, eftersom webbläsaren alltid klipper till halva rutan automatiskt. Kopiera CSS när den ser rätt ut, eller koppla bort hörnen för att bygga en asymmetrisk kapsel istället.

🛡️
Körs i webbläsare

Dina filer och indata lämnar aldrig den här enheten. Bearbetningen körs helt offline. 100 % säker.

Godkända format och regler

  • Hörnläge: oberoende övre vänstra, övre-höger, nedre-höger och nedre vänstra radiereglagen, var och en växlande mellan px- och procentenheter.
  • Kryssrutan Länka alla hörn som driver varje hörn från ett skjutreglage, plus en förhandsvisning av rutbräde på en ljus eller mörk bakgrund så att de avklippta hörnen förblir synliga.
  • Blob-läge med en Randomize-knapp som bygger organiska snedstrecksyntaxformer med åtta värden, stora och klara att kopiera som CSS.

Viktiga fördelar

✓ Varje reglage uppdaterar liveförhandsvisningen och CSS-raden direkt, så du behöver aldrig gissa hur 12px 40% 8px 24% faktiskt ser ut.
✓ Genvägen länk-alla hörn förvandlar en reglage till en perfekt cirkel, piller eller squircle utan att röra de andra tre hörnen för hand.
✓ Blob-läget genererar organiska, slumpmässiga former med snedstrecksyntaxen med åtta värden i CSS – en blick som ett enstaka gränsvärde aldrig kan ge.

Användningsfall

  • • Slå in ett korts fyra hörnradier oberoende av varandra – runda bara toppen av en rullgardinspanel eller bara en sida av en flik.
  • • Länka alla fyra hörnen till ett skjutreglage för att bygga en perfekt cirkel, en stadionformad pillerknapp eller en iOS-liknande squircle på några sekunder.
  • • Växla till blob-läge och tryck på Randomize tills en organisk form passar det tomma utrymmet bakom en hjältebild eller avatar, kopiera sedan CSS.