Generator for avrundede hjørner (border-radius)

Slik bruker du generatoren for avrundede hjørner

1. Dra i prikkene på kantene av forhåndsvisningen. Hver fargede prikk styrer den horisontale radiusen til et hjørne. Når Elliptiske hjørner (8 verdier) er avhuket, styrer de hvite prikkene de vertikale radiene.
2. Du kan også skrive inn nøyaktige verdier under Hjørner: Øverst til venstre, Øverst til høyre, Nederst til høyre og Nederst til venstre, hver med et felt for Horisontal og et for Vertikal.
3. Velg Enhet: % (prosent av boksen) eller px (piksler). Når du bytter, regnes de nåværende verdiene om, slik at formen forblir den samme.
4. Sett Bredde på boksen (px) og Høyde på boksen (px) slik at de passer til elementet ditt, og bruk Alle hjørner for å runde av alle hjørnene samtidig.
5. Prøv Forhåndsinnstillinger (Avrundet, Pille, Sirkel, Blad, Dråpe, Egg, Billett og tre blobber), eller klikk på Tilfeldig blob for en organisk form.
6. Huk av for Enkeltegenskaper hvis du heller vil ha de fire border-*-radius-deklarasjonene, og kopier deretter CSS-kode med Kopier.

Tastatur: sett en prikk i fokus og bruk piltastene for å endre radiusen ett trinn om gangen (10 med Shift).

Alt skjer i nettleseren din. Ingenting du skriver inn, sendes til en server.

Syntaksen til border-radius

border-radius tar én til fire verdier, i rekkefølgen øverst til venstre, øverst til høyre, nederst til høyre, nederst til venstre. Som med marger kopieres manglende verdier fra motstående hjørne: border-radius: 10px 20px runder av øverst til venstre og nederst til høyre med 10px, og de to andre med 20px. Verktøyet skriver alltid den korteste tilsvarende formen.

Hvert hjørne er egentlig en kvart ellipse med to radier. En skråstrek skiller de horisontale radiene fra de vertikale, og det gir opptil åtte verdier:

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

Før skråstreken står de horisontale radiene til de fire hjørnene. Etter den står de vertikale radiene. Når de to listene er like, utelates delen med skråstrek.

Piksler eller prosent?

• px gir samme kurve uansett hvor stort elementet er. Det er det riktige valget for knapper, kort og inndatafelt: border-radius: 8px.
• % er relativt til elementet: horisontale radier til bredden, vertikale radier til høyden. 50% gjør en kvadrat til en sirkel og et rektangel til en ellipse. Prosent er det som får blobformer til å skalere sammen med elementet.

For en pilleformet knapp bruker du en radius i piksler på minst halve høyden. Forhåndsinnstillingen Pille gjør akkurat det for boksstørrelsen du har skrevet inn. En svært stor verdi som 999px fungerer også.

Når naboradier til sammen er større enn siden de deler, skalerer nettleserne ned alle radiene proporsjonalt til de passer. Derfor ødelegger du ikke formen om du drar to håndtak forbi hverandre.

Blobformer

Blob-forhåndsinnstillingene og Tilfeldig blob bruker åtte prosentverdier der de to håndtakene på hver side summerer seg til 100 %. Kurvene møtes da nøyaktig, og formen ser ut som en glatt stein. Animer mellom to blobber med en CSS-transition på border-radius for en «morfende» effekt.