Border Radius-generator
Border radius-generatorn ställer in varje hörns border-radius i procent med separata reglage eller ett gemensamt All Corners-reglage, plus förval som cirkel, löv och blob, och kopierar CSS:en.
Om verktyget
Border radius-generatorn ställer in varje hörns border-radius i procent med separata reglage eller ett gemensamt All Corners-reglage, plus förval som cirkel, löv och blob, och kopierar CSS:en.
Så använder du det
- Dra i reglagen för varje hörn, eller använd All Corners.
- Testa ett förval som Circle, Leaf eller Blob.
- Ändra storleken på förhandsvisningen om det behövs.
- Klicka på Copy CSS.
Bra att veta
- border-radius tar upp till fyra värden i ordningen övre vänster, övre höger, nedre höger, nedre vänster.
- border-radius: 50% på ett kvadratiskt element ger en cirkel.
- Radier i procent skalas med elementets storlek; radier i pixlar är fasta.
- Ojämna radier i motsatta hörn ger löv- och blobformer utan någon SVG.
- border-radius stöds i alla aktuella webbläsare utan prefix.
Körs helt i din webbläsare – inget du skriver in laddas upp eller sparas.
Vanliga frågor
Hur gör jag rundade hörn i CSS?
Ange border-radius, till exempel border-radius: 12px; för alla hörn, eller fyra värden för enskilda hörn.
Hur gör jag en cirkel med CSS?
Ge elementet samma bredd och höjd och border-radius: 50%.
I vilken ordning kommer de fyra border-radius-värdena?
Övre vänster, övre höger, nedre höger, nedre vänster – medurs från det övre vänstra hörnet.
Ska border-radius anges i px eller %?
Använd px för jämna hörnstorlekar på knappar och kort; använd % för former som cirklar och blobbar som ska skalas med elementet.