Border-radius-generator
Angi hvert hjørne og kopier CSS-en.
- Kjører i nettleseren din — teksten din sendes aldri noe sted
- Ingen registrering, ingen kvoter, gratis å bruke så ofte du vil
Slik fungerer det
border-radius er enkelt helt til du vil ha tre avrundede hjørner og ett kvadratisk, og da må alle slå opp rekkefølgen på de fire verdiene.
Rekkefølgen, for godt
Øverst til venstre, øverst til høyre, nederst til høyre, nederst til venstre – med klokken fra øverst til venstre. Den samme rekkefølgen med klokken fra øverst til venstre gjelder også for margin, padding og border i kortform, så den er verdt å lære seg én gang for alle.
Piksler eller prosent
Piksler gir samme kurve uansett elementets størrelse. Prosenter er relative til elementets egen bredde og høyde, så kurven skalerer – og en radius på 50 % på et kvadrat gir en perfekt sirkel, som er standardtrikset for runde avatarer.
Pillformen
En radius som er større enn halve elementhøyden, begrenses til nøyaktig halvparten, og derfor gir border-radius: 999px pålitelig en pill uansett høyde. Det er mer robust enn å beregne riktig verdi, fordi det fortsetter å fungere når innholdet endres.
Når hjørner ser feil ut på nøstede elementer
En avrundet boks inni en annen avrundet boks trenger en mindre radius på den indre, redusert med paddingen mellom dem, ellers ligger ikke kurvene konsentrisk. Det er en liten detalj som får kort til å se ordentlig laget ut.
Border-radius-generator – spørsmål
I hvilken rekkefølge står de fire verdiene?
Øverst til venstre, øverst til høyre, nederst til høyre, nederst til venstre – med klokken fra øverst til venstre.
Hvordan lager jeg en perfekt sirkel?
border-radius: 50% på et element som er nøyaktig kvadratisk.
Hvordan lager jeg en pillknapp?
Bruk en stor verdi som 999px. Nettleserne begrenser den til halve høyden, så det fungerer i alle størrelser.
Bør jeg bruke piksler eller prosent?
Piksler for en jevn kurve; prosent når du vil at den skal skalere med elementet.
Fungerer det overalt?
Ja. border-radius har vært støttet uten prefiks i godt over ti år.