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.