Border Radius Generator

Om det här verktyget

Egenskapen border-radius rundar av hörnen på ett element. När alla fyra värden är lika används en kortform med ett enda värde. Olika värden skapar asymmetriska former — pillerformen använder 50% på alla hörn, lövformen växlar mellan 0% och 50%.

Klicka på ett hörntal för att skriva in ett värde direkt, eller dra det länkade skjutreglaget för att ändra alla fyra hörn på en gång. Stäng av Lås alla hörn för att kontrollera varje hörn oberoende.

Hur man använder

1. Ange värden i de fyra hörninmatningarna (övre-vänster, övre-höger, nedre-vänster, nedre-höger).
2. Aktivera Lås alla hörn för att ange alla fyra värden simultant med skjutreglaget.
3. Växla mellan px- och %-enheter beroende på dina designbehov.
4. Klicka på en preset (Piller, Löv, Blob osv.) för att omedelbart tillämpa en fördefinierad form.

Användningsfall

UI-designers använder border-radius för att skapa knappar, kort och avatarformer. Utvecklare finjusterar rundade hörn för att matcha varumärkesdesignsystem. Pillerformen (50%) används ofta för taggar och märken. Asymmetriska värden skapar organiska löv- eller blobformer för dekorativa element.

Vanliga frågor

• Vad är skillnaden mellan px och %? — px ger en fast hörnradie oavsett elementstorlek. % är relativ till elementets bredd och höjd — 50% på alla hörn skapar en perfekt cirkel (om elementet är kvadratiskt).
• Kan jag ange olika radier för varje hörn? — Ja. Avmarkera Lås alla hörn och skriv olika värden i varje hörninmatning.
• Vad betyder kortformen i utdata? — När alla fyra hörn är lika är utdata ett enda värde. När de skiljer sig är CSS-ordningen: övre-vänster, övre-höger, nedre-höger, nedre-vänster.