Border-radius Generator
Gratis kreativ border-radius-generator online. Træk i 8 håndtag eller vælg en blob-forudindstilling for at skabe organiske CSS-former og kopiere koden med det samme.
Hvad betyder 8-værdi-syntaksen for border-radius?
I syntaksen border-radius: h1 h2 h3 h4 / v1 v2 v3 v4 er værdierne før skråstregen vandrette radier (oppe til venstre, oppe til højre, nede til højre, nede til venstre), og værdierne efter er lodrette radier. Forskellige værdier i hver retning er det, der skaber de organiske blob-former.
Hvordan bruger jeg den genererede CSS?
Kopiér border-radius-linjen og indsæt den i en vilkårlig CSS-regel for det element, du vil forme, f.eks. .card { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }. Virker i ren CSS, Sass, Tailwind arbitrary values og inline-styles.
Hvor bruges blob-former?
Blob-former er populære i hero-illustrationer, avatarer, profilbilleder, funktionskort, knapper og dekorative baggrunde i moderne web- og appdesign.
Virker afrundede hjørner i alle browsere?
Ja. border-radius understøttes af alle moderne browsere, herunder Chrome, Firefox, Safari, Edge og mobilbrowsere, uden leverandørpræfikser.
Kan jeg animere blob-formen?
Ja. border-radius kan animeres, så en CSS-transition lader dig blødt morfe mellem former, f.eks. .blob { transition: border-radius .8s ease; }.
Hvad er forskellen på 4-værdi- og 8-værdi-syntaksen?
4-værdi-formen giver hvert hjørne samme vandrette og lodrette radius, hvilket er nok til piller og cirkler. 8-værdi-formen adskiller vandrette og lodrette radier, hvilket muliggør asymmetriske, organiske former.
Hvordan laver jeg en perfekt cirkel?
Sæt alle otte værdier til 50 % på et kvadratisk element, eller brug blot border-radius: 50%. Du kan også starte fra en cirkellignende forudindstilling og finjustere.
Bliver mine data uploadet et sted?
Nej. Generatoren kører helt i din browser med ren CSS og JavaScript. Intet af det, du trækker, skriver eller kopierer, sendes til nogen server.
Kan jeg bruge det på ikke-kvadratiske elementer?
Ja, men procentvise radier er relative til elementets dimensioner, så et rektangel får ellipseformede hjørner og ser anderledes ud end den kvadratiske forhåndsvisning. Brug de genererede værdier som udgangspunkt og justér.
Sådan bruges Border-radius Generator
Border-radius med otte værdier skaber organiske blob-former med elliptiske hjørner, som en almindelig afrundet rektangel ikke kan matche. Form blobben med håndtagene og kopiér den færdige CSS — alt renderes live i din browser.
- Træk i en af de otte håndtag på formens kanter — dem på øverste og nederste kant styrer de vandrette radier, og dem på siderne de lodrette.
- Klik på en af de seks forudindstillede felter for at starte fra en designet blob, og finjustér derefter værdierne i talfelterne Vandrette radier og Lodrette radier (ét pr. hjørne, 0–100 %).
- Tryk på Tilfældig for at rulle en ny organisk form med ét klik, eller Nulstil for at vende tilbage til standardform og farver.
- Vælg en Formfarve og en Baggrund for at se blobben mod din målpalette — begge opdateres med det samme.
- Tryk på Kopiér CSS for at hente den live viste border-radius-deklaration i bjælken i bunden og indsætte den på et hvilket som helst element.
Anvend koden på et firkantet element med overflow: hidden for det klassiske blob-look; procent holder kurven flydende i enhver størrelse, og skråstregen i syntaksen adskiller vandrette radier fra lodrette.
Relaterede værktøjer
- CSS Border Radius Generator Visuel CSS border-radius generator. Juster hvert hjørne uafhængigt med realtidsforhåndsvisning og kopier CSS-koden med det samme.
- CSS-gradientgenerator Opret fantastiske CSS-gradienter visuelt. Generer lineære, radielle og koniske gradienter med flere farvestop, vinkler og positioner. Kopier produktionsklar CSS-kode øjeblikkeligt.
- CSS Box Shadow Generator Gratis online CSS box-shadow generator. Opret smukke skygger visuelt med justerbar forskydning, sløring, spredning, farve og indsat. Live forhåndsvisning og øjeblikkelig kodekopiering.
- Farvepaletgenerator Opret smukke, harmoniske farvepaletter øjeblikkeligt med vores gratis online generator. Understøtter monokromatiske, analoge, komplementære, triadiske, split-komplementære og tetradiske tilstande. Finjuster farver med HSL-skydere, lås favoritter og eksporter som CSS, Tailwind, JSON eller SVG. 100% browserbaseret, dine data forlader aldrig din enhed.
- Farvekonverter Gratis online farvekonverter. Konverter HEX, RGB, HSL, HSV formater øjeblikkeligt med visuel vælger. 100% privat, kører i din browser.
- CSS Easing-generator Gratis online CSS easing-generator. Træk cubic-bezier-kontrollpunkterne på en interaktiv kurve, vælg mellem 18 forudindstillinger, se en loopende boldanimation og kopiér tidsfunktionen med det samme.
- CSS Tekstskyggegenerator Gratis online tekstskyggegenerator. Stabl flere skyggelag med forskydning, sløring, farve og gennemsigtighed, prøv forudindstillinger som Neon, 3D, Retro og kopier CSS-koden med det samme.
- CSS Clip-path-generator Gratis online CSS clip-path-generator. Design polygon-, cirkel-, ellipse- og inset-former med trkbare punkter, live forhåndsvisning og CSS-kode med ét klik.