CSS-egenskaben border-radius og dens mekanik
CSS-egenskaben border-radius bestemmer, hvor meget hjørnerne på et HTML-element skal afrundes. Værktøjet arbejder ud fra en fastlagt rækkefølge, hvor de fire hjørneskydere kortlægges i urets retning: øverst til venstre, øverst til højre, nederst til højre og nederst til venstre.
Når du designer til web, kan du styre hvert hjørne individuelt for at skabe asymmetriske former, eller du kan koble dem sammen, så alle fire hjørner følger den samme værdi. Den indledende værdi for skyderne i denne generator er 24, hvilket resulterer i CSS-koden border-radius: 24px;.
Forskellen på pixel og procent i responsivt design
Valget af måleenhed har stor betydning for, hvordan afrundingen opfører sig, når boksens størrelse ændrer sig:
- Pixels (px): I pixel-tilstand afrundes et hjørne med en fast værdi. Hjørnets radius forbliver den samme, uanset om boksen strækkes eller gøres mindre.
- Procent (%): I procent-tilstand afrundes hjørnet i forhold til selve boksens dimensioner. En vandret procentdel følger boksens bredde, mens en lodret procentdel følger boksens højde. Dette gør procent-enheden velegnet til responsive elementer, hvor formen skal skalere proportionalt med indholdet.
Avancerede former med elliptiske hjørner
Når den elliptiske tilstand er slået fra, fungerer hvert hjørne som en kvart cirkel med en enkelt radius. Hvis du aktiverer elliptisk tilstand, får hvert hjørne i stedet en separat vandret og lodret radius. Dette gør det muligt at skabe blødere og mere organiske former.
I CSS repræsenteres elliptiske hjørner ved hjælp af en skråstreg (en to-værdi-skråstregsform), som adskiller de vandrette radier fra de lodrette radier. Generatoren skriver automatisk denne komplekse syntaks for dig, når elliptisk tilstand er aktiv, og vender tilbage til den korte form uden skråstreg, så snart hjørnerne igen er helt runde.
Sådan laver du cirkler, piller og organiske klatter
Værktøjet gør det nemt at ramme specifikke geometriske former ved hjælp af bestemte indstillinger eller de indbyggede knapper under overskriften "Forudindstillinger":
- Perfekt cirkel: For at omdanne en kvadratisk boks til en perfekt cirkel skal du koble hjørnerne sammen, skifte enheden til "%" og trække skyderen op på 50%. Du kan også opnå dette med et enkelt klik på forudindstillingen "Cirkel", som automatisk sætter alle hjørner til 50%.
- Pilleformet knap: Hvis du vil lave en aflang knap med perfekt afrundede ender, skal du beholde enheden "px" og trække skyderen forbi halvdelen af knappens højde. Siderne vil derefter forblive fuldt afrundede, uanset hvor bred knappen bliver.
- Organiske klatter (blobs): Ved at aktivere elliptiske hjørner og justere de individuelle vandrette og lodrette skydere for hvert hjørne, kan du forme asymmetriske, flydende klat-former.
Værktøjets funktioner og brugerflade
Generatoren indeholder en række kontroller, der lader dig eksperimentere med og finjustere dine hjørner:
- Skydere: Justerer afrundingen af hjørnerne i et interval fra 0 til 100. Når "Kobl alle hjørner sammen" er aktiveret, styrer en enkelt skyder mærket "Alle hjørner" hele boksen. Når koblingen slås fra, får du adgang til fire individuelle skydere: "Øverst til venstre", "Øverst til højre", "Nederst til højre" og "Nederst til venstre". I elliptisk tilstand opdeles hver af disse yderligere i en "Vandret" og en "Lodret" skyder.
- Enhed: En omskifter, hvor du vælger mellem "px" og "%".
- Forudindstillinger: Hurtige genveje til bestemte former via knapperne "Skarp", "Afrundet", "Cirkel", "Klat (Blob)" og "Blad".
- Forhåndsvisning: En visuel boks, der øjeblikkeligt opdateres og viser formen med de valgte indstillinger.
- CSS-output: Under overskriften "CSS" vises den genererede kode, som du hurtigt kan kopiere til dit eget stylesheet ved at klikke på knappen "Kopier CSS".
Behandling af data og privatliv
Når du bruger denne generator, foregår alt arbejde lokalt på din egen enhed. Hvert hjørne tegnes direkte i din browser, og intet af det, du indstiller her, uploades til BroBroGo.
Ofte stillede spørgsmål
Hvordan fungerer de fire hjørner og px overfor %?
De fire skydere svarer i urets retning til hjørnerne øverst til venstre, øverst til højre, nederst til højre og nederst til venstre. I pixels afrundes et hjørne med en fast værdi; i procent afrundes det i forhold til boksen — en vandret procentdel følger bredden, og en lodret procentdel følger højden, så 50% forvandler en firkant til en cirkel.
Hvad gør elliptisk tilstand?
Når den er slået fra, er hvert hjørne en kvart cirkel med en enkelt radius. Slår du den til, får hvert hjørne en separat vandret og lodret radius, hvilket er måden, du opbygger bløde, organiske "klat-former" (blobs) på. Generatoren skriver formen med skråstreg og to værdier for dig, og falder tilbage til den korte form, så snart hjørnerne er runde igen.
Hvordan laver jeg en perfekt cirkel eller en pilleform?
Kobl hjørnerne sammen, skift til procent og sæt værdien til 50%: så bliver en firkant til en cirkel. Hvis du vil lave en pilleformet knap, skal du beholde pixels i stedet og trække et hjørne forbi halvdelen af knappens højde — så forbliver siderne helt afrundede uanset bredden. Forudindstillingen Cirkel klarer det første scenarie med et enkelt klik.