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.
Hvad er CSS border-radius?
CSS border-radius er en egenskab, der afrunder hjørnerne på et elements ydre kant. Du kan indstille hvert hjørne uafhængigt med en til fire værdier.
Hvordan laver jeg en perfekt cirkel med border-radius?
Sæt border-radius til 50% på et kvadratisk element (lige bredde og højde). For en ellipse, brug border-radius: 50% på et rektangulært element.
Hvilke enheder kan jeg bruge til border-radius?
Border-radius accepterer px, %, em, rem, vw, vh og andre CSS-længdeenheder. Procenter er relative til elementets dimensioner.
Hvad er den korte syntaks for border-radius?
Den korte syntaks følger mønsteret: øvre-venstre øvre-højre nedre-højre nedre-venstre. Én værdi gælder alle hjørner. To værdier sætter øvre-venstre/nedre-højre og øvre-højre/nedre-venstre.
Kan jeg lave elliptiske hjørner?
Ja, med skråstreg (/) syntaks kan du definere separate horisontale og vertikale radier. For eksempel border-radius: 50% / 100px.
Fungerer border-radius på alle elementer?
Border-radius fungerer på de fleste HTML-elementer inklusive div, button, img og input. Uden overflow: hidden kan det dog ikke klippe overflødigt indhold.
Kan jeg lave komplekse former med border-radius?
Ja, ved at kombinere forskellige radiusværdier for hvert hjørne kan du lave piller, ovaler, blade og tilpassede organiske former.
Understøttes border-radius i alle browsere?
Ja, border-radius understøttes i alle moderne browsere inklusive Chrome, Firefox, Safari, Edge og mobilbrowsere.
Hvordan laver jeg en pillformet knap?
Sæt border-radius til en værdi lig med eller større end halvdelen af elementets højde. For en 40px høj knap, brug border-radius: 20px eller højere.
Påvirker border-radius baggrundsbilleder?
Ja, border-radius klipper baggrunden, baggrundsbilledet og kanten af et element. Baggrunden følger automatisk de afrundede hjørner.
Kan jeg animere border-radius?
Ja, border-radius er animerbar med CSS-overgange og animationer. Du kan glat overgå mellem forskellige radiusværdier.
Kan jeg bruge border-radius med CSS-transformationer?
Ja, border-radius fungerer godt med CSS-transformationer som rotate, scale og translate.
Hvordan opretter jeg en cirkel med kant?
Anvend border-radius: 50% på et kvadratisk element med lige bredde og højde, og tilføj derefter en border-egenskab.
Hvad er forskellen mellem individuelle hjørneegenskaber og kort syntaks?
Individuelle egenskaber som border-top-left-radius giver dig præcis kontrol over hvert hjørne. Den korte syntaks lader dig indstille flere hjørner i én erklæring.
Sådan bruges CSS Border Radius Generator
Form afrundede hjørner visuelt med denne CSS-generator til border-radius. Alt kører lokalt i din browser, og ingen data uploades.
- Vælg px, %, em eller rem i rullemenuen Unit.
- Træk skyderne Top Left, Top Right, Bottom Right og Bottom Left for at afrunde hvert hjørne hver for sig.
- Slå Link all corners til for at bruge én værdi til alle fire hjørner på én gang.
- Kopiér den genererede CSS fra forhåndsvisningen og indsæt den i dit stylesheet.
50 % i alle hjørner giver en perfekt cirkel eller kapsel; med em eller rem skalerer radius sammen med din typografi.
Relaterede værktøjer
- 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.
- 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 Grid-generator Gratis visuel CSS Grid-generator med live forhåndsvisning. Design responsive grid-layouts interaktivt og eksporter produktionsklar CSS-kode direkte.
- CSS Flexbox-generator Visuel CSS Flexbox-generator med live forhåndsvisning. Juster flex-egenskaper og få CSS-kode klar til brug.
- 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.
- 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.