Ställ in radien för fyra hörn

Med Hörnradie kan designers och frontendutvecklare justera ett gränssnitt före implementering. Ställ in rundningen för vart och ett av de fyra hörnen separat.

Ställ in rundningen för vart och ett av de fyra hörnen separat. Använd det gratis i webbläsaren utan att skapa ett konto.

Så använder du

Ange radievärdet för det övre vänstra hörnet och sedan de andra tre hörnen i angiven ordning.
Använd en enhet som px, em eller procent och behåll samma enhet för alla fyra hörn.
Klicka på generera-knappen för att skapa motsvarande CSS-regel för border-radius.
Läs resultatet, som kombinerar de fyra värdena, och kopiera det till din stilmall.
Testa renderingen på ett provelement innan du lägger till den på din sida.

Exempel

Exempelindata använder fyra olika hörnvärden. Efter generering visar resultatet motsvarande border-radius-egenskap. Du kan jämföra resultatet med dina egna värden för att bekräfta hörnordningen innan du klistrar in det i din kod.

Gränser och format

Verktyget ritar inte en ruta på skärmen; det skapar bara CSS-regeln att kopiera.
Värdena måste vara numeriska och noll eller positiva; negativa värden accepteras inte av CSS-egenskapen.
Blandade enheter kan göra att webbläsaren ignorerar resultatet.
Kontrollera alltid den slutliga renderingen på din sida, eftersom elementets sammanhang kan påverka det visuella intrycket.

Var bearbetningen sker

Allt körs i din webbläsare. Värdena du anger laddas aldrig upp eller lagras. Beräkningen och formateringen av CSS-regeln sker lokalt, utan extern kommunikation.

Vanliga frågor

I vilken ordning ska jag ange de fyra värdena?

Den förväntade ordningen är uppe till vänster, uppe till höger, nere till höger, nere till vänster. Detta är standardordningen för egenskapen border-radius. Om du byter plats på två värden blir renderingen annorlunda. Kontrollera det visade resultatet för att bekräfta.

Kan jag använda procent?

Ja, procent accepteras. De skapar rundade hörn proportionellt mot elementets storlek. Behåll samma enhet för alla fyra hörn för att undvika ett inkonsekvent resultat.

Är resultatet redo att klistras in i min CSS-fil?

Ja, resultatet är en komplett CSS-egenskap. Du kan kopiera det och klistra in det i din stilmall. Se bara till att det inte åsidosätts av en annan regel.