Hoppa till innehåll

CSS Border Radius Generator

Generera CSS border-radius visuellt med liveförhandsvisning. Justera varje hörn individuellt eller länka dem. Stöd för px, % och rem. Kopiera CSS-kod. Gratis onlineverktyg.

Förhandsvisning

12px
12px
12px
12px
Enhet

CSS-utdata

 

Vad är CSS border-radius?

CSS-egenskapen border-radius rundar hörnen på ett elements yttre kantkant. Du kan ange en enda radie för cirkulära hörn, eller två radier för elliptiska hörn.

border-radius-syntax

Förkortningen border-radius accepterar 1 till 4 värden. Med 1 värde är alla hörn lika. Med 2 sätter det första övre vänster/nedre höger och det andra övre höger/nedre vänster. Med 4 värden sätts varje hörn individuellt: övre vänster, övre höger, nedre höger, nedre vänster.

Elliptiska hörn

Med /-syntaxen (t.ex. border-radius: 50% / 30%) kan du definiera olika horisontella och vertikala radier för elliptiska hörn.

Integritet

All border-radius-generering körs 100 % i din webbläsare. Ingen data skickas till någon server.