Border Radius-generator — CSS Rundade Hörn Online Gratis

CSS border-radius går långt utöver enkla rundade hörn. Fullständig syntax stöder åtta värden — fyra horisontella och fyra vertikala radier — vilket möjliggör organiska, asymmetriska former. Vår visuella generator låter dig dra kontrollpunkter för att skapa exakt den form du vill ha och kopiera sedan CSS:en med ett klick.

Vad är CSS Border-Radius?

CSS-egenskapen border-radius rundar hörnen på ett element. Medan de flesta utvecklare använder enkla värden som border-radius: 8px tillåter den fullständiga syntaxen oberoende horisontella och vertikala radier för varje hörn, vilket skapar komplexa organiska former långt bortom grundläggande rundade rektanglar.

Hur använder du Border Radius-generatorn?

Dra hörnkontrollpunkter för att justera varje radius oberoende. Växla mellan enkelt läge (ett värde för alla hörn) och avancerat läge (individuella horisontella och vertikala radier). Se formen uppdateras i realtid på förhandsgranskelementet. Kopiera det genererade CSS-egenskapsvärdet.

Bästa praxis

Använd konsekventa border-radius-värden i hela din design — definiera 3–4 radiustokens (--radius-sm, --radius-md, --radius-lg) och använd dem överallt. För pillformer, ange border-radius till 9999px — detta fungerar oavsett elementhöjd. Tänk på att border-radius klipper innehåll inklusive skuggor och konturer.