Handytool
UtviklerGratisKjøres lokalt

CSS border-radius-generator

Design CSS border-radius visuelt — ensartet, per-hjørne og elliptisk — med live forhåndsvisning.

Forhåndsvisning
CSS
border-radius: 16px;
Modus
Enhet

Per-hjørne-modus styrer hvert hjørne individuelt; elliptisk deler horisontale og vertikale radier.

Om CSS border-radius-generator

Handy tools border-radius-generator lar deg forme hjørnene til et element med skyvere i stedet for gjetting. Bruk ensartet modus for en enkel avrundet boks, per-hjørne-modus for å bygge asymmetriske pillformer, eller elliptisk modus for å dele horisontale og vertikale radier for organiske blobformer. Forhåndsvisningen oppdateres live og CSS-erklæringen er ett klikk unna.

Funksjoner i CSS border-radius-generator

  • 01

    Ensartede og per-hjørne moduser

    Ensartet modus bruker en radius på hvert hjørne. Per-hjørne-modus kontrollerer øvre-venstre, øvre-høyre, nedre-høyre og nedre-venstre uavhengig — pill, blad og asymmetrisk tag-former er et par klikk unna.

  • 02

    Elliptiske (X/Y) hjørner

    Slå elliptisk modus av/på for å spesifisere en horisontal og en vertikal radius per hjørne — syntaksen CSS støtter for organiske, blobaktige former.

  • 03

    Tre enheter

    Bytt mellom px, % og rem. Prosentandeler skaper sanne ellipser som skaleres med boksen; rem-verdier sporer rot-skriftstørrelsen for tilgjengelighet.

Vanlige spørsmål om CSS border-radius-generator

Hva er forskjellen mellom px og %?
Pikselmradii er absolutte — et 16px-hjørne er alltid 16px. Prosentradii er relative til elementets bredde og høyde, så 50% skaper en perfekt sirkel på en firkantet boks og en ellipse på et rektangel.
Når skal jeg bruke elliptisk modus?
Bruk elliptisk modus når du vil ha et hjørne som buler ut mer på en akse — for eksempel en horisontal pille (50%/100%) eller en bladaktig blobform. CSS uttrykker dette som `top-left-x top-right-x ... / top-left-y top-right-y ...`.
Hvorfor ser prosent-radiusen min feil ut på en ikke-kvadratisk boks?
Prosenter på border-radius er relative til den tilsvarende siden: horisontale prosenter til bredde, vertikale til høyde. På en bred, kort boks betyr det at hjørnene strekker seg til ellipser, ikke perfekte buer.
Fungerer utgangen i alle nettlesere?
Ja — border-radius og elliptisk syntaks støttes i alle moderne nettlesere, inkludert alle evergreen-versjoner av Safari, Firefox, Edge og Chrome.

Relaterte verktøy

Utvikler →

Utforsk flere verktøy

Alle verktøy →