Border-radius-generator

Sådan bruger du border-radius-generatoren

1. Træk i prikkerne på kanterne af eksemplet. Hver farvet prik sætter den vandrette radius for et hjørne. Når Elliptiske hjørner (8 værdier) er afkrydset, sætter de hvide prikker de lodrette radier.
2. Du kan også skrive præcise værdier under Hjørner: Øverst til venstre, Øverst til højre, Nederst til højre og Nederst til venstre, hver med et felt for Vandret og et for Lodret.
3. Vælg Enhed: % (procent af boksen) eller px (pixel). Når du skifter, omregnes de nuværende værdier, så formen forbliver den samme.
4. Angiv Boksens bredde (px) og Boksens højde (px), så de passer til dit element, og brug Alle hjørner til at afrunde alle hjørner på én gang.
5. Prøv Forudindstillinger (Afrundet, Pille, Cirkel, Blad, Dråbe, Æg, Billet og tre klatter), eller klik på Tilfældig klat for en organisk form.
6. Sæt kryds i Enkeltegenskaber, hvis du foretrækker de fire border-*-radius-erklæringer, og kopiér derefter CSS-kode med Kopiér.

Tastatur: giv en prik fokus, og tryk på piletasterne for at ændre dens radius ét trin ad gangen (10 med Shift).

Værktøjet virker i din browser, og intet, du indtaster, sendes til en server.

Syntaksen for border-radius

border-radius tager fra én til fire værdier i rækkefølgen øverst til venstre, øverst til højre, nederst til højre, nederst til venstre. Ligesom ved margener kopieres manglende værdier fra det modstående hjørne: border-radius: 10px 20px afrunder øverst til venstre og nederst til højre med 10px og de to andre med 20px. Værktøjet skriver altid den korteste tilsvarende form.

Hvert hjørne er i virkeligheden en kvart ellipse med to radier. En skråstreg adskiller de vandrette radier fra de lodrette, så der kan være op til otte værdier:

border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

Før skråstregen står de vandrette radier for de fire hjørner. Efter den står de lodrette radier. Hvis de to lister er ens, udelades delen efter skråstregen.

Pixel eller procent?

• px giver den samme kurve uanset elementets størrelse. Det er det rigtige valg til knapper, kort og inputfelter: border-radius: 8px.
• % er relativt til elementet: vandrette radier til dets bredde og lodrette radier til dets højde. 50% gør en kvadrat til en cirkel og et rektangel til en ellipse. Det er procenter, der får klatformer til at skalere med elementet.

Til en pilleformet knap bruger du en pixelradius på mindst halvdelen af højden. Forudindstillingen Pille gør præcis det for den boksstørrelse, du har angivet. En kæmpeværdi som 999px virker også.

Når to nabo-radier tilsammen er større end den side, de deler, skalerer browseren alle radier ned i samme forhold, til de passer. Derfor går formen ikke i stykker, når du trækker to håndtag forbi hinanden.

Klatformer

Klat-forudindstillingerne og Tilfældig klat bruger otte procentværdier, hvor de to håndtag på hver side tilsammen giver 100 %. Så mødes kurverne præcist, og formen ligner en glat flodsten. Du kan animere mellem to klatter med en CSS-transition på border-radius for at få en »morfende« effekt.