Border radius-generator
Indstil hvert hjørne og kopiér CSS'en.
- Kører i din browser — din tekst sendes aldrig nogen steder hen
- Ingen tilmelding, ingen kvoter, gratis at bruge så ofte, du vil
Sådan fungerer det
border-radius er enkelt, indtil du vil have tre hjørner afrundet og ét skarpt, og så skal alle slå rækkefølgen af de fire værdier op.
Rækkefølgen, én gang for alle
Øverst til venstre, øverst til højre, nederst til højre, nederst til venstre – med uret fra øverst til venstre. Den samme rækkefølge med uret fra øverst til venstre gælder også for shorthand-egenskaberne margin, padding og border, hvilket er værd at lære udenad én gang for alle.
Pixel eller procent
Pixel giver den samme kurve uanset elementets størrelse. Procenter er i forhold til elementets egen bredde og højde, så kurven skalerer – og en radius på 50% på et kvadrat giver en perfekt cirkel, hvilket er standardtricket til runde avatarer.
Pillerformen
En radius, der er større end halvdelen af elementets højde, begrænses til præcis halvdelen, og derfor giver border-radius: 999px pålideligt en pille uanset højden. Det er mere robust end at beregne den rigtige værdi, fordi det fortsat virker, når indholdet ændres.
Når hjørner ser forkerte ud på indlejrede elementer
En afrundet boks inde i en anden afrundet boks skal have en mindre radius på den indre, reduceret med afstanden mellem dem, ellers sidder kurverne ikke koncentrisk. Det er en lille detalje, der får kort til at se ordentligt lavet ud.
Border radius-generator – spørgsmål
I hvilken rækkefølge står de fire værdier?
Øverst til venstre, øverst til højre, nederst til højre, nederst til venstre – med uret fra øverst til venstre.
Hvordan laver jeg en perfekt cirkel?
border-radius: 50% på et element, der er helt kvadratisk.
Hvordan laver jeg en pillerformet knap?
Brug en stor værdi som 999px. Browsere begrænser den til halvdelen af højden, så den virker i alle størrelser.
Skal jeg bruge pixel eller procent?
Pixel for en ensartet kurve; procent, når du vil have den til at skalere med elementet.
Virker det overalt?
Ja. border-radius har været understøttet uden præfiks i godt og vel et årti.