Generator av rundade hörn och former
Justera de horisontella och vertikala radierna för de fyra hörnen i px eller % och förhandsgranska formen. Kopiera eller spara den genererade CSS för border-radius. Förhandsvisningens bredd, höjd och färg ingår inte i CSS.
Det här kan du göra
Justera rundningen från en förinställning
Välj bland 8 förinställningar, bland rundade hörn, en kapselform och ett blad, och justera radierna. Att välja en förinställning ersätter radierna och enheten.
Ge de fyra hörnen olika rundning
Stäng av inställningen för samma radie för att ange de övre vänstra, övre högra, nedre högra och nedre vänstra hörnets horisontella och vertikala radier separat.
Kontrollera och hämta CSS
Generera CSS efter att du kontrollerat formen. Växla mellan förkortad skrivning och deklarationer för enskilda hörn och kopiera sedan eller spara den som en CSS-fil.
Så använder du verktyget
Välj en förinställning och enhet
Ange radier direkt eller välj en förinställning att börja justera från. Att byta enhet omvandlar inte siffrorna.
Jämför rundning och form
Ange ett värde för att använda samma radie. Om du vill variera den per hörn avmarkerar du alternativet och justerar de horisontella och vertikala värdena.
Kontrollera storleken vid behov
I förhandsvisningsinställningarna kan du ändra bredd, höjd och förhandsvisningsfärg. De ingår inte i utdata-CSS:en.
Generera CSS och kopiera eller spara den sedan
Tryck ”Generera CSS” och välj det format du vill ha. Om du ändrar radier, enhet eller storlek genererar du igen.
Användbart när
Forma hörnen på kort och knappar
När du vill skapa CSS för sidkomponenter genom att runda alla fyra hörn lika eller bara de övre hörnen.
Skapa en asymmetrisk rundad bakgrund
När du vill ändra den horisontella och vertikala rundningen per hörn för att skapa konturer som liknar blad eller organiska former.
Så hänger radier, enheter och visningsstorlek ihop
Horisontellt och vertikalt är två riktningar för samma hörn
Den horisontella radien styr den horisontella rundningen och den vertikala radien den vertikala rundningen. Ett hörn rundas inte om något av värdena är 0. Ange de fyra hörnen medsols från det övre vänstra.
% använder bredd och höjd som separata referenser
Horisontella %-värden är relativa till elementets bredd och vertikala %-värden till dess höjd. Även med samma siffror ser en kvadrat och en hög eller bred rektangel olika ut. px anger en längd direkt.
För stora radier krymps i samma proportion
Om summan av angränsande radier överstiger sidlängden minskas alla 8 visade radier med en gemensam faktor. Indatavärdena och den genererade CSS:en förändras inte. I detaljerna efter genereringen kan du kontrollera de radier som används för förhandsvisningen.
Vad rundade hörn kan uttrycka
border-radius gör hörn till elliptiska kurvor. Det kan inte skapa indag eller godtyckliga polygoner. Förinställningen squircle approximerar formen med elliptiska hörn men återger inte den matematiska kurvan exakt.
Vanliga frågor
Kan jag ange olika rundning för varje hörn?
Ja. Avmarkera ”Använd samma radie för alla hörn” för att ange varje horns horisontella och vertikala radie separat. Om du markerar den igen sätts alla radier till det övre vänstra hörnets horisontella radie.
Omvandlas siffrorna när jag byter enhet?
Nej. Siffrorna behålls och bara enheten ändras. Om ett värde över 100 finns kvar efter att du bytt från px till % anger du det igen inom intervallet 0–100.
Ingår förhandsvisningens storlek och färg i CSS:en?
Nej. Utdata innehåller endast border-radius-deklarationer. Ställ in bredd, höjd och bakgrundsfärg på sidan eller i komponenten där du använder det.
Varför har den visade formen mindre rundade hörn än radierna jag angav?
Webbläsaren minskar de visade radierna i samma proportion för att hörnkurvorna inte ska överlappa. Du kan kontrollera minskningsfaktorn och px-värdena för varje hörn under ”Radier som används för visning”.
Indata och resultat
- Radier
- Ange alla 8 värden i samma enhet: 0–100% eller 0–9999px. Decimalvärden accepteras också.
- Förhandsvisning
- Förhandsvisningens bredd och höjd är heltal från 1–400px. En bredd som inte får plats kan rullas horisontellt i fältet.
- Utdata
- Förkortad border-radius eller deklarationer för varje av de 4 hörnen. Kopiera eller spara border-radius.css.
- Ingår inte
- Bredd, höjd, bakgrundsfärg samt bild- eller SVG-exporter.