CSS Border Radius Generator
Visuell CSS border-radius generator. Juster hvert hjørne uavhengig med sanntidsforhåndsvisning og kopier CSS-koden umiddelbart.
Hva er CSS border-radius?
CSS border-radius er en egenskap som avrunder hjørnene på et elements ytre kant. Du kan stille inn hvert hjørne uavhengig med en til fire verdier.
Hvordan lager jeg en perfekt sirkel med border-radius?
Sett border-radius til 50% på et kvadratisk element (lik bredde og høyde). For en ellipse, bruk border-radius: 50% på et rektangulært element.
Hvilke enheter kan jeg bruke for border-radius?
Border-radius godtar px, %, em, rem, vw, vh og andre CSS-lengdeenheter. Prosenter er relative til elementets dimensjoner.
Hva er den korte syntaksen for border-radius?
Den korte syntaksen følger mønsteret: øvre-venstre øvre-høyre nedre-høyre nedre-venstre. Én verdi gjelder alle hjørner. To verdier setter øvre-venstre/nedre-høyre og øvre-høyre/nedre-venstre.
Kan jeg lage elliptiske hjørner?
Ja, med skråstrek (/) 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 inkludert div, button, img og input. Uten overflow: hidden kan det imidlertid ikke klippe overflødig innhold.
Kan jeg lage komplekse former med border-radius?
Ja, ved å kombinere forskjellige radiusverdier for hvert hjørne kan du lage piller, ovaler, blader og tilpassede organiske former.
Støttes border-radius i alle nettlesere?
Ja, border-radius støttes i alle moderne nettlesere inkludert Chrome, Firefox, Safari, Edge og mobilnettlesere.
Hvordan lager jeg en pillformet knapp?
Sett border-radius til en verdi lik eller større enn halvparten av elementets høyde. For en 40px høy knapp, bruk border-radius: 20px eller høyere.
Påvirker border-radius bakgrunnsbilder?
Ja, border-radius klipper bakgrunnen, bakgrunnsbildet og kanten til et element. Bakgrunnen følger automatisk de avrundede hjørnene.
Kan jeg animere border-radius?
Ja, border-radius er animerbar med CSS-overganger og animasjoner. Du kan glatt overgang mellom forskjellige radiusverdier.
Kan jeg bruke border-radius med CSS-transformasjoner?
Ja, border-radius fungerer bra med CSS-transformasjoner som rotate, scale og translate.
Hvordan lager jeg en sirkel med kant?
Bruk border-radius: 50% på et kvadratisk element med lik bredde og høyde, og legg deretter til en border-egenskap.
Hva er forskjellen mellom individuelle hjørneegenskaper og kort syntaks?
Individuelle egenskaper som border-top-left-radius gir deg presis kontroll over hvert hjørne. Den korte syntaksen lar deg stille inn flere hjørner i én erklæring.