Border Radius-generator

Runda varje hörn med reglage, skapa organiska former med det elliptiska läget och kopiera din CSS direkt.

Förinställningar
Hörn
Alla hörn
24px
CSS
Dra i reglagen för att runda dina hörn.

Varje hörn ritas direkt i din webbläsare. Inget av det du ställer in här laddas upp till BroBroGo.

Vanliga frågor

Hur fungerar de fyra hörnen och px mot %?

De fyra reglagen motsvarar, medurs, hörnen uppe till vänster, uppe till höger, nere till höger och nere till vänster. I pixlar rundas ett hörn med ett fast värde; i procent rundas det relativt till boxen – en horisontell procent följer bredden och en vertikal procent följer höjden, så 50% gör en kvadrat till en cirkel.

Vad gör det elliptiska läget?

När det är avstängt är varje hörn en kvartscirkel med en enda radie. Slå på det så får varje hörn en separat horisontell och vertikal radie, vilket är hur du bygger mjuka, organiska "blobb"-former. Generatorn skriver koden med snedstreck åt dig och går tillbaka till den korta formen så fort hörnen är runda igen.

Hur gör jag en perfekt cirkel eller en pillerform?

Länka hörnen, byt till procent och sätt 50%: en kvadrat blir en cirkel. För en pillerformad knapp behåller du pixlar istället och drar ett hörn förbi halva knappens höjd – då förblir sidorna helt rundade oavsett bredd. Förinställningen Cirkel fixar det första fallet med ett klick.

CSS Cubic Bezier-generatorDra i de två handtagen för att forma en övergångskurva, se en punkt följa den bredvid en linjär rörelse och kopiera cubic-bezier()-värdet.Box Shadow-generatorDra i reglagen för att forma en box-shadow, stapla lager för djup och kopiera den färdiga CSS-koden direkt.Gradient-generatorBygg en linjär, radiell eller konisk toning, lägg till färgstopp och ställ in riktningen, och kopiera sedan CSS-koden med ett klick.Flexbox-generatorSkapa en flex-container och dess objekt med visuella kontroller, se layouten reagera direkt och kopiera CSS-koden med ett klick.CSS Grid-generatorStäll in kolumner och rader, dra över cellerna för att placera ut objekt och kopiera CSS-koden med matchande HTML med ett klick.CSS clamp()-kalkylatorAnge en storlek för små och stora skärmar och få ett flytande clamp()-värde som skalas mjukt däremellan – för textstorlekar, padding, marginaler eller gap.FärgkonverterareKonvertera färger mellan HEX, RGB, HSL, HSV, CMYK och LAB – ändra valfritt fält så uppdateras resten automatiskt.