Handytool
UdviklerGratisKører lokalt

CSS border-radius generator

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

Forhåndsvisning
CSS
border-radius: 16px;
Tilstand
Enhed

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

Om CSS border-radius generator

Handytools border-radius generator lader dig forme hjørnerne af et element med skyders i stedet for gætte arbejde. Brug enhedlig tilstand til en simpel afrundet boks, per-hjørne tilstand til at bygge asymmetriske pill former, eller elliptisk tilstand til at splitte horisontale og vertikale radier for organiske blob former. Forhåndsvisningen opdateres live og CSS deklarationen er et klik væk.

Funktioner i CSS border-radius generator

  • 01

    Enhedlig og per-hjørne tilstande

    Enhedlig tilstand anvender en radius til hvert hjørne. Per-hjørne tilstand styrer top-left, top-right, bottom-right og bottom-left uafhængigt — pill, blad og asymmetriske tag former er et par klik væk.

  • 02

    Elliptisk (X/Y) hjørner

    Skift elliptisk tilstand til at angive en horisontale og en vertikal radius pr. hjørne — syntaksen CSS understøtter organiske, blob-lignende former.

  • 03

    Tre enheder

    Skift mellem px, % og rem. Procent værdier skaber sande ellipser der skalerer med boksen; rem værdier spor root font størrelse for tilgængelighed.

Ofte stillede spørgsmål om CSS border-radius generator

Hvad er forskellen mellem px og %?
Pixel radier er absolutte — en 16px hjørne er altid 16px. Procent radier er relative til elementets bredde og højde, så 50% skaber en perfekt cirkel på en kvadratisk boks og en ellipse på et rektangel.
Hvornår skulle jeg bruge elliptisk tilstand?
Brug elliptisk tilstand når du vil have et hjørne der buler mere på en akse — for eksempel en horisontale pill (50%/100%) eller en blade-lignende blob form. CSS udtrykker dette som `top-left-x top-right-x ... / top-left-y top-right-y ...`.
Hvorfor ser min procent radius forkert ud på en ikke-kvadratisk boks?
Procenter på border-radius er relative til den tilsvarende side: horisontale procenter til bredde, vertikal til højde. På en bred, kort boks betyder det hjørnerne strækker sig ind i ellipser, ikke perfekte buer.
Fungerer outputtet i hver browser?
Ja — border-radius og elliptisk syntaks er understøttet i hver moderne browser inklusive alle evergreen versioner af Safari, Firefox, Edge og Chrome.

Relaterede værktøjer

Udvikler →

Udforsk flere værktøjer

Alle værktøjer →