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.
Slik bruker du CSS Border Radius Generator
Form rundede hjørner visuelt med denne CSS-generatoren for border-radius. Alt kjører lokalt i nettleseren din, og ingen data lastes opp.
- Velg px, %, em eller rem i rullegardinmenyen Unit.
- Dra glidebryterne Top Left, Top Right, Bottom Right og Bottom Left for å runde av hvert hjørne hver for seg.
- Slå på Link all corners for å bruke én verdi på alle fire hjørnene samtidig.
- Kopier den genererte CSS-en fra forhåndsvisningen og lim den inn i stilarket ditt.
50 % i alle hjørner gir en perfekt sirkel eller kapsel; med em eller rem skalerer radien sammen med typografien din.
Relaterte verktøy
- CSS Box Shadow Generator Gratis online CSS box-shadow generator. Lag vakre skygger visuelt med justerbar forskyvning, uskarphet, spredning, farge og innfelt. Live forhåndsvisning og umiddelbar kodekopiering.
- CSS-gradientgenerator Lag fantastiske CSS-gradienter visuelt. Generer lineære, radielle og koniske gradienter med flere fargestopp, vinkler og posisjoner. Kopier produksjonsklar CSS-kode umiddelbart.
- CSS Grid-generator Gratis visuell CSS Grid-generator med live forhåndsvisning. Design responsive grid-layouter interaktivt og eksporter produksjonsklar CSS-kode direkte.
- CSS Flexbox-generator Visuell CSS Flexbox-generator med live forhåndsvisning. Juster flex-egenskaper og få CSS-kode klar til bruk.
- Border-radius Generator Gratis kreativ border-radius-generator online. Dra i 8 håndtak eller velg en blob-forhåndsinnstilling for å lage organiske CSS-former og kopiere koden umiddelbart.
- Fargekonverterer Gratis online fargekonverterer. Konverter HEX, RGB, HSL, HSV formater umiddelbart med visuell velger. 100% privat, kjører i nettleseren din.
- CSS Easing-generator Gratis online CSS easing-generator. Dra cubic-bezier-kontrollpunktene på en interaktiv kurve, velg blant 18 forhåndsinnstillinger, se en loope ballanimasjon og kopier tidsfunksjonen med en gang.
- CSS Tekstskyggegenerator Gratis online tekstskyggegenerator. Stabble flere skyggelag med forskyvning, uskarphet, farge og gjennomsiktighet, prøv forhåndsinnstillinger som Neon, 3D, Retro og kopier CSS-koden med en gang.