Border radius-generator

Afrund hvert hjørne med skydere, form organiske klatter med elliptisk tilstand, og kopier din CSS med det samme.

Forudindstillinger
Hjørner
Alle hjørner
24px
CSS
Træk i skyderne for at afrunde dine hjørner.

Hvert hjørne tegnes direkte i din browser. Intet af det, du indstiller her, uploades til BroBroGo.

FAQ

Hvordan fungerer de fire hjørner og px overfor %?

De fire skydere svarer i urets retning til hjørnerne øverst til venstre, øverst til højre, nederst til højre og nederst til venstre. I pixels afrundes et hjørne med en fast værdi; i procent afrundes det i forhold til boksen — en vandret procentdel følger bredden, og en lodret procentdel følger højden, så 50% forvandler en firkant til en cirkel.

Hvad gør elliptisk tilstand?

Når den er slået fra, er hvert hjørne en kvart cirkel med en enkelt radius. Slår du den til, får hvert hjørne en separat vandret og lodret radius, hvilket er måden, du opbygger bløde, organiske "klat-former" (blobs) på. Generatoren skriver formen med skråstreg og to værdier for dig, og falder tilbage til den korte form, så snart hjørnerne er runde igen.

Hvordan laver jeg en perfekt cirkel eller en pilleform?

Kobl hjørnerne sammen, skift til procent og sæt værdien til 50%: så bliver en firkant til en cirkel. Hvis du vil lave en pilleformet knap, skal du beholde pixels i stedet og trække et hjørne forbi halvdelen af knappens højde — så forbliver siderne helt afrundede uanset bredden. Forudindstillingen Cirkel klarer det første scenarie med et enkelt klik.

CSS Cubic Bezier-generatorTræk i de to håndtag for at forme en easing-kurve, se en prik bevæge sig langs den i forhold til en jævn bevægelse, og kopier cubic-bezier()-værdien.Box shadow-generatorTræk i skyderne for at forme en box-shadow, stabel lag for at skabe dybde, og kopier den færdige CSS med det samme.Gradient-generatorByg en lineær, radial eller konisk gradient, tilføj farvestop og indstil retningen, og kopier derefter CSS-koden med ét klik.Flexbox-generatorOpsæt en flex-container og dens elementer med visuelle kontroller, se layoutet reagere live, og kopier CSS-koden med ét klik.CSS Grid-generatorIndstil dine søjler og rækker, træk hen over cellerne for at placere elementer, og kopier grid-CSS med tilhørende HTML med ét klik.CSS clamp() BeregnerIndtast en størrelse til små og store skærme, og få en flydende clamp()-værdi, der skalerer jævnt derimellem — til skriftstørrelser, padding, marginer eller gaps.FarvekonverterKonverter farver mellem HEX, RGB, HSL, HSV, CMYK og LAB — rediger et felt, og resten opdateres løbende.